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

Question

I'm using vue-js 2.4 and last version of element-ui 1.4.1

I have some drop down to select from a list of options, and each option is an object. Before the last update, everything was fine but now I'm facing several problems with the select. Especially the label displayed does not match the actual selected option.

Breaking change:

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

Questions

I'd like to know how to use the new value-key, I tried several things but it does not seem to change the issue.

Answer 1

Thanks to what @poke points out here is what was helpful and fix the issue

 <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>

Answer 2

Unfortunately, I cannot really understand what the pull request is about but looking at the changes, it appears that 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 valueKey attribute on the el-select element. By default, this is 'value', so if your custom object has a value member and that can be used as the identifier, then that should already work. For all other objects, you can set the valueKey attribute accordingly.