VueJS中v-for结合v-model实现问卷答题绑定的方法咨询

我来给你捋捋怎么实现这个需求哈！核心思路是用一个数组来存储每个题目的用户答案，然后通过v-model把每个题目对应的选项和数组里的对应位置绑定起来。

具体步骤和修改后的代码： #

首先，在Vue组件的data里定义一个用来存储用户答案的数组userAnswers，这样每个题目索引index就能对应数组里的一个位置：

export default {
  data() {
    return {
      questions: [
        // 这里是你的题目数据示例
        { question: "第一题：Vue的核心特性是什么？" },
        { question: "第二题：v-for循环需要绑定唯一key吗？" }
      ],
      userAnswers: [] // 存储每个题目的答案，下标对应题目index
    };
  },
  methods: {
    // 可选：添加提交方法查看结果
    submitAnswers() {
      console.log("用户提交的答案：", this.userAnswers);
      // 这里可以写提交到后端的逻辑
    }
  }
};

然后修改模板部分，重点调整这几个地方：

• radio的name属性要和每个题目绑定，不然所有题目会变成同一组只能选一个
• 给radio加上v-model绑定到userAnswers[index]
• 给v-for循环添加唯一key，符合Vue的规范

修改后的模板代码：

<template lang="html">
  <div class="container">
    <div v-for="(question, index) in questions" :key="index" class="question-item">
      <h3>Question {{ index + 1 }}</h3> <!-- 加1让题目序号从1开始更符合日常习惯 -->
      <p>{{ question.question }}</p>
      <!-- 每个题目选项组的name要唯一，避免选项组混乱 -->
      <label>
        <input 
          type="radio" 
          :name="`question-${index}`" 
          value="1" 
          v-model="userAnswers[index]"
        >
        选项1
      </label>
      <label>
        <input 
          type="radio" 
          :name="`question-${index}`" 
          value="2" 
          v-model="userAnswers[index]"
        >
        选项2
      </label>
      <!-- 更多选项可以按这个格式继续添加 -->
    </div>
    <button @click="submitAnswers">提交答案</button>
  </div>
</template>

关键细节解释： #

• userAnswers[index]绑定：每个题目索引对应的答案会自动存在数组的对应位置，比如第0个题目选了"2"，userAnswers[0]的值就会是"2"
• 动态name属性：:name="question-${index}"确保每个题目是独立的选项组，用户可以给每个题目单独选答案，不会互相干扰
• key的添加：Vue要求v-for循环必须绑定唯一key，这里用index没问题（如果题目不会动态排序/增减的话），如果题目有唯一id，用id作为key会更稳妥

这样用户选完答案后，userAnswers数组里就会按题目顺序存储对应的答案，你可以直接用这个数组做后续的提交或者逻辑处理啦！

内容的提问来源于stack exchange，提问作者margherita pizza