问题
一开始遍历生成的el-select绑定了的是data中的数据,这样导致生成的el-select绑定的都是同一个数据,改变一个的值其他也都改变
数据
把我拿到的数据简化如下,情况大概就是最外层的数组遍历生成了el-select,选择器的每一项是image_list中的元素
[
{
id: 'xxx',
name: 'xxx',
detail: 'xxx',
config: {
network: [],
compute: [
{
image_list: [
{ image_id: '1001', image_name: 'xxx' },
{ image_id: '1002', image_name: 'xxx' }
]
}
]
}
},
{
id: 'xxx',
name: 'xxx',
detail: 'xxx',
config: {
network: [],
compute: [
{
image_list: [
{ image_id: '1001', image_name: 'xxx' },
{ image_id: '1002', image_name: 'xxx' }
]
}
]
}
},
]
解决
只要每一个选择器绑定的数据不一样就可以了,但拿到的对象数组中的对象没有一个合适的属性去跟选择器绑定,那便新增一个属性好了
页面结构
<ul>
<li v-for="item in dataList" :key="item.id">
<div>
{{ item.name }}
</div>
<div>
{{ item.detail }}
</div>
<div>
<el-select
v-model="item.image_id"
placeholder="请选择"
>
<el-option
v-for="image in item.config.compute[0].image_list"
:key="image.image_id"
:label="image.image_name"
:value="image.image_id"
/>
</el-select>
</div>
<div>
<a href="javascript:void(0);" @click="handleBuy(item)">
{{ '购买' }}
</a>
</div>
</li>
</ul>
一开始item中没有image_id这个属性,与其绑定的话不会有值显示出来,后续点击选中某一项,item中会新增image_id这个属性,属性值为选中的值,且其他选择器不受影响,后续只要将item.image_id在需要的时候赋值给data中的数据即可
script
export default {
name: 'xxx',
data () {
return {
dataList: [],
id: '', // 选中的id
imageId: '', // 选中的镜像id
showdialog: false
}
},
methods: {
handleBuy (item) {
if (!item.image_id) {
return this.$message.warning('请选择镜像!')
}
this.id = item.id
this.imageId = item.image_id
this.showdialog = true // 购买弹窗显示
}
}
}
</script>
大概就是这样,选中一个另一个值不变