多个el-select push数组问题？

Z时代
2024-02-07
分类：IT

A和B选项(el-select)是动态新增的，请问选择后如何把A和B的值push到数组中呢？

回答：

应该是本来就是数组中的元素才对。

arr = [
    {a: '', b: ''},
    {a: '', b: ''},
]
add(){
    this.arr.push({a: '', b: ''})
}
remove(i){
    this.arr.splice(i, 1)}

template 大概是下面这样


<div v-for="item in arr">
A: <select v-model="item.a"> </select>
B: <select v-model="item.b"> </select></div>

参考这个 https://jsrun.net/ZmcKp/edit

多个el-select push数组问题？

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

回答：

找了个简单例子，希望对你有所启发【其实改动改动就能用了~?】

<template>
  <div>
    <div v-for="(item, index) in dataList" :key="index">
      <span>{{ item.name }}：</span>
      <el-select v-model="item.selectedColor" :options="item.colors" @change="selectColor(index)"></el-select>
      <br>
    </div>
    <el-button @click="updateData">修改数据</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dataList: [
        {
          name: '商品1',
          colors: ['红', '绿', '蓝'],
          selectedColor: ''
        },
        {
          name: '商品2',
          colors: ['黑', '白', '灰'],
          selectedColor: ''
        },
        // ... 其他商品数据
      ],
      selectedIndex: -1 // 初始化要修改的商品索引为 -1
    }
  },
  methods: {
    selectColor(index) {
      this.selectedIndex = index; // 保存要修改的商品索引
    },
    updateData() {
      if (this.selectedIndex === -1) {
        return; // 如果没有要修改的商品索引，直接返回
      }
      this.dataList[this.selectedIndex].colors[0] = '黄'; // 修改商品的颜色数组
      this.dataList[this.selectedIndex].options = this.dataList[this.selectedIndex].colors; // 更新商品的 options 属性
    }
  }
}
</script>