VueJS动态表单：如何实现v-model动态绑定替代硬编码选中状态

嘿，这个场景我太熟了——硬编码selected、selected2这类变量完全没法适配动态加载的问题，咱们换个思路，用对象或者数组来统一存储所有问题的选中值就完美解决了！

1. 先初始化存储答案的变量 #

首先在组件的data里声明一个对象（或数组），用来映射每个问题的选中值。假设你的问题数据每个都有唯一id（推荐用唯一标识，避免列表顺序变动出问题），那用对象最方便：

export default {
  data() {
    return {
      questions: [], // 存从服务器拿的问题数据
      answers: {} // 键是问题id，值是对应选中的选项值
    };
  },
  async mounted() {
    // 用axios拉取问题数据
    const response = await axios.get('/your-api-endpoint/questions');
    this.questions = response.data;
  }
};

2. 在v-for里动态绑定v-model #

遍历问题列表的时候，直接把v-model绑定到answers[q.id]就行，不用再给每个问题单独写变量：

<div v-for="question in questions" :key="question.id" class="question-container">
  <h4>{{ question.title }}</h4>
  <select v-model="answers[question.id]">
    <option value="">请选择答案</option>
    <option 
      v-for="option in question.options" 
      :key="option.value" 
      :value="option.value"
    >
      {{ option.label }}
    </option>
  </select>
</div>

要是你的问题没有唯一id，临时用循环的index也能凑活（但还是建议后端给每个问题加唯一标识），把绑定改成answers[index]，:key也换成index就行。

3. 计算总分的实现 #

等用户选完答案，要算总分就简单了——遍历问题列表，匹配对应的选中值和分值：

methods: {
  calculateTotalScore() {
    let total = 0;
    this.questions.forEach(question => {
      const selectedVal = this.answers[question.id];
      // 假设每个选项里存了对应的分值，比如option.score
      const matchedOption = question.options.find(opt => opt.value === selectedVal);
      if (matchedOption) {
        total += matchedOption.score;
      }
    });
    return total;
  }
}

为啥这个方案好用？ #

• 完全适配动态加载的问题，不管后端返回10个还是100个问题，代码都不用改
• 不用维护一堆零散的selectedX变量，代码整洁太多
• 后续提交表单也方便，直接把answers对象传给后端就行

内容的提问来源于stack exchange，提问作者Johan Pettersson