遍历生成的el-select值的绑定，选中一个其他不变

问题

一开始遍历生成的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>

大概就是这样，选中一个另一个值不变