Element: The [Feature Request] el-select binding value is an object type, and be sure to specify that value-key is limited to its uniqueness

[Fangty1]

Existing Component

是

Component Name

el-select

Description

http://element-cn.eleme.io/#/zh-CN/component/select 中提到：
'绑定值为对象类型，请务必指定 value-key 作为它的唯一性标识'
为何必须制定key的值只能是'value'，比如这样是ok的 :key="item.value" ，比如这样是not ok的 :key="item.id"
options从数据库中取值场景应该比较多吧，默认是的key属性是 'id'的情况比较多。

这个限制能解决吗，使用者容易掉坑里。

[element-bot]

Translation of this issue:

Existing Component

yes

Component Name

El-select

Description

Http://element-cn.eleme.io/#/zh-CN/component/select mentioned:

'bind value is object type, make sure to specify value-key as its uniqueness'.
Why should we have to make the value of key only'value', such as OK: key= "item.value", for example, not OK: key= "item.id"

Options should get more values from the database, and the default key attribute is'id'.
Can this limit be solved, the user is easy to drop in the pit.

[wacky6]

没懂你想说什么

[Fangty1]

我把elementui官方el-select例子改了下， 把:key="item.key" 改为 :key="item.id"。
操作界面试一下， 界面已经不能正常用了。
https://jsfiddle.net/r0z42smv/

[Fangty1]

也就是说 el-option :key 这个属性的值， 只能是 什么什么.value，不能是 .value1， 或者.id 或其他的值。
不知道说明白没有。

[wacky6]

:key 是 vue 的属性。和 v-for 一起用

[Fangty1]

看了下vue文档，确实 key 是 vue属性。但是vue 是支持 :key = "item.id" 这样写法的。
https://cn.vuejs.org/v2/guide/list.html#key

但是为什么在element el-selection 中必须 :key = "item.value" ？
jsfiddle上的代码应该证实了这一点吧。

[wacky6]

demo的对象里面没有id属性，当然不能用item.id。。

[Fangty1]

demo里当然有id属性。 下面的代码是不能正常运行的。 demo代码写的很明白了。

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

data() {
return {
options: [{
id: '选项1',
label: '黄金糕1'
}, {
id: '选项2',
label: '双皮奶'
}, {
id: '选项3',
label: '蚵仔煎'
}, {
id: '选项4',
label: '龙须面'
}, {
id: '选项5',
label: '北京烤鸭'
}],
value8: ''
}
}

[Darkphooo]

你的:value="item.value"里面还有options中不存在的value属性

[Fangty1]

@Darkphooo

是我不小心贴错了代码，代码应该是下面的。 当然结果是一样，是不能运行的。
<el-option v-for="item in options" :key="item.id" :label="item.label" :value="item"> </el-option>

data() {
  return {
    options: [{
      id: '选项1',
      label: '黄金糕'
    }, {
      id: '选项2',
      label: '双皮奶'
    }, {
      id: '选项3',
      label: '蚵仔煎'
    }, {
      id: '选项4',
      label: '龙须面'
    }, {
      id: '选项5',
      label: '北京烤鸭'
    }],
    value8: ''
  }
}

[Fangty1]

element 文档中是有提到：
在下面链接页面搜索并定位到 Select Attributes， 定位位置上面有一行蓝字提醒：
http://element-cn.eleme.io/#/zh-CN/component/select

如果 Select 的绑定值为对象类型，请务必指定 value-key 作为它的唯一性标识。

[Darkphooo]

把你的代码修改成
<el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id"></el-option>
就可以正常使用了
demo在这里：https://jsfiddle.net/c1vu5u5a/

[Fangty1]

@Darkphooo

但是我想绑定object，element文档有讲， 是支持的。
但是：

如果 Select 的绑定值为对象类型，请务必指定 value-key 作为它的唯一性标识。

如果 :value="item" ， 则必须 :key="item.value" （必须是.value，而不能是别的，比如.id）， 我只是不明白为什么有这个限制。。。

[Darkphooo]

@Fangty1
你需要在el-select组件里用value-key来指明你的对象中通过哪个属性来判别选项，在你的demo里面需要在el-select里加上value-key="id"
el-select里的value-key和el-option里由于使用v-for而需要的:key并不是同一个东西
demo在这里：https://jsfiddle.net/c1vu5u5a/1/ （已经更新到新的demo）

[firesh]

建议看看vue的文档，理解一下key：
https://cn.vuejs.org/v2/guide/list.html#key

[Fangty1]

@Darkphooo
https://jsfiddle.net/c1vu5u5a/1/ 代码打不开， 可否再更新到 https://jsfiddle.net/c1vu5u5a/？

[Leopoldthecoder]

@Fangty1 这不是提 issue 的正确方法。如果你遇到了「必须是.value，而不能是别的，比如.id」这个问题，应该是由你来准备一个重现的 demo，而不是让其他热心用户来写 demo。

[Fangty1]

@Leopoldthecoder
我从一开始提的就是这个问题，一开始就有demo。。。 你们一直把主题拐到别的地方去。。。
直接看代码，运行是明显有问题的。
https://jsfiddle.net/c1vu5u5a/4/

[Darkphooo]

@Fangty1 请在el-select里加入value-key
详见https://jsfiddle.net/darkphooo/c1vu5u5a/5/

[Leopoldthecoder]

https://jsfiddle.net/c1vu5u5a/6/

另：在你的上一个回复之前，我并没有在这个 issue 里看到你的重现 demo。而且请不要埋怨这里回复你的用户，他们没有把「主题拐到别的地方去」。

[Fangty1]

@Drakphooo @Leopoldthecoder
谢谢两位。 按你们代码可以运行，是我对element文档的这句话理解错了。

如果 Select 的绑定值为对象类型，请务必指定 value-key 作为它的唯一性标识。

但是话说回来，为什么item的键为'value' 的时候就不需要指定 value-key='value', 是默认值吗， 下面代码没有指定 value-key也是运行正常的，这是最初让我产生误解的地方：
https://jsfiddle.net/c1vu5u5a/7/

[Leopoldthecoder]

value-key 的默认值是 'value'，所以对于 key 为 'value' 的情况就不用显示指定 value-key 了。

[Fangty1]

好的，谢谢各位！

[wanweiwang2012]

文档中原话：
value-key 作为 value 唯一标识的键名，绑定值为对象类型时必填，默认值为'value'

这句正确理解应是：把value-key指定为你绑定对象中其中一个属性就可以了（但是属性对应的值在你的整个列表数据中必须唯一）

比如数据为：
[{ name: '浙江省', code: 1 }, { name: '湖北省', code: 2 }]
绑定value-key="code" 或 value-key="name" 都是OK的
但若数据为：
[{ name: '浙江省', code: 1 }, { name: '湖北省', code: 2 }, { name: '湖北省', code: 22 }]
则绑定只能为value-key="code", 因为数据中后二个对象的name值是相同，选择时会被全部选中