Vue.js中输入框绑定对象格式值的实现问题求助

你想要让每个输入框对应的answer[index]输出成包含对应问题ID和输入内容的对象对吧？咱们一步步调整代码来实现：

1. 修正Data中的结构 #

首先，你的answer应该是数组类型，因为questions是数组，每个问题需要对应一个独立的答案对象。把原来的单个对象改成空数组：

data: function () {
  return {
    questions: [],
    answer: [], // 改为数组，每个元素存储{id: 问题ID, answer: 输入内容}
  }
},

2. 初始化答案数组（推荐操作） #

当你获取到questions数据后，建议同步初始化answer数组，给每个问题预先绑定好ID，避免后续出现undefined的问题：

// 示例：在获取问题数据的逻辑后初始化（比如接口回调或mounted钩子）
mounted() {
  // 假设这里是你获取questions的逻辑，比如接口请求返回数据
  this.questions = [/* 你的问题列表数据 */];
  // 根据questions生成对应的answer数组
  this.answer = this.questions.map(question => ({
    id: question.id,
    answer: ''
  }));
}

3. 修改模板的绑定逻辑 #

模板里不需要使用:value，直接通过v-model绑定到answer[index].answer即可，此时每个answer[index]会自动保留对应的问题ID：

<table>
  <tr v-for="(question_overall, index) in questions" :key="question_overall.id">
    <td>
      {{ question_overall.question }}
      <div>
        <!-- 直接绑定到对应答案对象的answer属性 -->
        <input type="text" v-model="answer[index].answer">
      </div>
      <!-- 现在这里会输出你想要的格式：{id: xxx, answer: "输入内容"} -->
      {{ answer[index] }}
    </td>
  </tr>
</table>

这样调整后，当你在输入框输入内容时，answer[index]就会自动变成你期望的{ "id": 1, "answer": "the value of this answer is from what I type in" }格式啦。另外记得给v-for加上:key属性（用问题ID作为key），这是Vue的性能优化最佳实践哦。

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