Vue.js中为动态多选下拉框批量赋值预选项的问题

问题原因 #

当前所有动态组件共享同一个绑定变量，且editStation方法仅对数组首个对象进行匹配赋值，导致所有下拉框/输入框都显示第一个对象的预选项。

修正方案 #

1. 复用原数组绑定（推荐） #

直接扩展stationButtons的每个对象，添加下拉框选中状态属性，确保每个组件绑定独立数据源：

模板代码

<!-- 用quidoId作为key，比索引更稳定 -->
<div v-for="button in stationButtons" :key="button.quidoId">
  <!-- 下拉框绑定当前button的选中ID -->
  <select v-model="button.selectedQuidoId">
    <option 
      v-for="option in quidoOptions" 
      :value="option.id" 
      :key="option.id"
    >
      {{ option.name }}
    </option>
  </select>
  <!-- 输入框直接绑定button的input属性 -->
  <input v-model="button.input" />
</div>

脚本代码

data() {
  return {
    stationButtons: [
      // 示例原始数据
      { quidoId: 101, input: "站点A" },
      { quidoId: 102, input: "站点B" }
    ],
    quidoOptions: [] // API返回的下拉选项
  };
},
methods: {
  async editStation() {
    // 调用API获取下拉选项
    const response = await this.$api.getQuidoOptions();
    this.quidoOptions = response.data;

    // 遍历每个stationButton，匹配对应quido选项并初始化选中状态
    this.stationButtons.forEach(button => {
      const matchedOption = this.quidoOptions.find(opt => opt.id === button.quidoId);
      button.selectedQuidoId = matchedOption?.id || null;
    });
  }
}

2. 独立表单数据数组方式 #

若不想修改原始stationButtons数组，可创建与之一一对应的formData数组存储组件状态：

脚本代码

data() {
  return {
    stationButtons: [/* 你的原始数据 */],
    quidoOptions: [],
    formData: [] // 存储每个组件的独立状态
  };
},
methods: {
  async editStation() {
    const response = await this.$api.getQuidoOptions();
    this.quidoOptions = response.data;

    // 初始化formData，与stationButtons一一对应
    this.formData = this.stationButtons.map(button => {
      const matchedOption = this.quidoOptions.find(opt => opt.id === button.quidoId);
      return {
        selectedQuidoId: matchedOption?.id || null,
        inputValue: button.input
      };
    });
  }
}

模板代码

<div v-for="(item, index) in stationButtons" :key="index">
  <select v-model="formData[index].selectedQuidoId">
    <option 
      v-for="option in quidoOptions" 
      :value="option.id" 
      :key="option.id"
    >
      {{ option.name }}
    </option>
  </select>
  <input v-model="formData[index].inputValue" />
</div>

核心要点 #

• 避免所有组件绑定同一个全局变量，确保每个动态渲染的组件有独立的绑定数据源
• 遍历stationButtons数组，为每个项单独匹配API返回的下拉选项，而非仅处理首个对象

内容的提问来源于stack exchange，提问作者martin-den