Clever Geek Handbook

Vue.js - UI Element - Breaking changes select dropdown and key-value

I am using the vue-js 2.4

latest version tooelement-ui 1.4.1

I have a dropdown menu to select from a list of options and each option is an object. Everything was fine before the last update, but now I am facing several issues with select

. Especially the label displayed does not match the actual option selected.

Breaking change:

Select when value is an object, key-value is required as its unique identification key, # 5897

Questions

I would like to know how to use the new one value-key

, I tried several things, but it doesn't seem to change the problem.

+3


source to share


2 answers


Unfortunately I can't figure out what the pull request is , but looking at the changes, it seems like you need to specify how the objects are identified.



Apparently you have to specify which property of the custom object will be used by setting the attribute valueKey

on the el-select

element. By default this is 'value'

, so if your custom object has a member value

and can be used as an identifier, then this should already work. For all other objects, you can set the attribute appropriately valueKey

.

+1


source


Thanks to what @poke points out, this was what was helpful and fix the problem.



 <el-select v-model="value" value-key="id">
            <el-option
              v-for="item in options"
              :label="item.label"
              :key="item.id"
             :value="item">
            </el-option>
</el-select>
+5


source






More articles:


All Articles