How to specify the ID for ElSelect

I’ve recently used https://element.eleme.io which UI Framework for Vuejs. I got a situation when I was using the ElSelect component that I need passing an object to the value attribute of ElOption component. This is my first init code for this.

            <el-select
              class="xs:w-full"
              v-model="selectedSiblings"
              multiple
              filterable
              allow-create
              default-first-option
              placeholder="Choose sibling for your club">
              <el-option
                v-for="item in siblings"
                :key="item.id"
                :label="`${item.first_name} ${item.last_name}`"
                :value="item">
              </el-option>
            </el-select>

I used the id value for the key attribute. But it did not work. Vuejs showed me an error message said that the ElOption component could not specify the key.

I researched around on Google for a while and found the answer. The answer is we need to set another attribute for ElSelect component to determined the key in this case. It is value-key attribute. So I added it to the ElSelect component and it worked.

            <el-select
              value-key="id"
              class="xs:w-full"
              v-model="selectedSiblings"
              multiple
              filterable
              allow-create
              default-first-option
              placeholder="Choose sibling for your club">
              <el-option
                v-for="item in siblings"
                :key="item.id"
                :label="`${item.first_name} ${item.last_name}`"
                :value="item">
              </el-option>
            </el-select>

Hope this help.

Leave a comment

Your email address will not be published. Required fields are marked *