vue.js - 点击按钮添加select下拉框，如何使得每个select的v-model:value不一样？

Question

点击按钮添加select下拉框，如何使得每个select的v-model:value不一样？

如何使得每个select的v-model:value不一样？

Answer 1

const models = ref<Ref<string>[]>([])

function onClick() {
    models.value.push(ref(''))
}

<div v-for='(m, i) of models' :key='i'>
    <el-select v-model='m' />
</div>

Answer 2

在Vue中，为了使每个动态添加的select元素的v-model值不同，你可以使用动态绑定v-model到一个在数据对象中的唯一属性。这通常涉及到使用一个数组或对象来存储这些动态生成的select的v-model值，并使用一个唯一的键或索引来区分它们。

以下是一个基本的示例，说明如何实现这一点：

HTML (Vue模板)

<template>
  <div>
    <button @click="addSelect">添加Select</button>
    <div v-for="(select, index) in selects" :key="index">
      <select v-model="select.value">
        <option v-for="option in options" :value="option.value" :key="option.value">
          {{ option.text }}
        </option>
      </select>
      <p>当前值: {{ select.value }}</p>
    </div>
  </div>
</template>

JavaScript (Vue组件)

<script>
export default {
  data() {
    return {
      selects: [ // 初始时有一个select，或者为空数组[]
        { value: '' },
      ],
      options: [ // 下拉选项
        { value: 'option1', text: '选项1' },
        { value: 'option2', text: '选项2' },
        // ... 其他选项
      ],
    };
  },
  methods: {
    addSelect() {
      this.selects.push({ value: '' }); // 每次点击按钮时添加一个新的select对象
    },
  },
};
</script>

在上面的示例中，selects是一个数组，它包含每个select的v-model绑定的对象。这些对象都有一个value属性，用于存储select的当前值。当点击“添加Select”按钮时，会向selects数组中添加一个新的空对象，该对象具有一个默认的空value。

使用v-for="(select, index) in selects"，我们遍历selects数组并为每个select对象创建一个select元素。每个select元素的v-model都绑定到其对应的select.value。

这样，每个select元素都有自己的v-model值，这些值在selects数组中分开存储。