Vue.js v-for循环内Textarea的v-model绑定异常问题

• v-for 循环渲染的所有 Textarea 都绑定了同一个全局响应式变量 answer.text，所有组件实例共享同一份数据源，才会出现单框输入、所有框同步显示内容的异常。
• 直接给 answer.text 加索引写法报错的原因是：answer.text 初始值是空字符串，属于基础数据类型，既不是数组也不是对象，无法通过索引/键名挂载属性，因此触发 TypeError: Cannot use 'in' operator to search for '0' in 报错。
• 额外隐患：当前v-for绑定的:key="index"存在问题，你对循环数组做了slice().reverse()反转操作，index会随数组顺序变动，容易引发渲染错位；同时模板里循环生成的DOM都用了固定id（比如id="FAQ"、id="divQuestion"），同一页面id重复不符合HTML规范，也可能触发DOM操作异常。

两种实现方式二选一即可：

方案1（推荐，实现成本最低） #

直接将输入值绑定到当前循环的question项上，无需额外维护全局answer存储：

1. 修改模板中v-for的key绑定，替换为唯一的question.id，同时调整textarea的v-model绑定：

<template>
  <div
    v-for="question in questions.slice().reverse()" 
    :key="question.id"
    class="m-2 col-7"
  >
    <!-- 其余原有代码保留，只修改待回答区域的textarea和按钮部分 -->
    <div v-if="question.answer == null" id="divPsycAnswer">
      <textarea 
        cols="60" 
        rows="3" 
        style="border-radius:12px" 
        v-model="question.tempAnswer"
      ></textarea>
      <button id="btnSend" @click="publishAnswer(question)">Responder</button>
    </div>
  </div> 
</template>

2. 调整publishAnswer方法逻辑，提交时直接取当前question的tempAnswer字段作为回答内容，提交成功后可将该字段置空，重置输入框状态。

方案2（不改动原question数据结构） #

将全局的answer改为对象结构，以问题唯一id为键存储每个输入框的独立值：

1. 修改data配置：

data() {
  return {
    form: {
      text: ""
    },
    answer: {}, // 初始化为空对象，按问题id分别存储输入内容
    questions: [],
    message: "",
    loading: false,
    id: null
  }
}

2. 调整模板绑定逻辑：

<template>
  <div
    v-for="question in questions.slice().reverse()" 
    :key="question.id"
    class="m-2 col-7"
  >
    <!-- 其余原有代码保留，只修改待回答区域的textarea部分 -->
    <div v-if="question.answer == null" id="divPsycAnswer">
      <textarea 
        cols="60" 
        rows="3" 
        style="border-radius:12px" 
        v-model="answer[question.id]"
      ></textarea>
      <button id="btnSend" @click="publishAnswer(question.id)">Responder</button>
    </div>
  </div> 
</template>

3. 在publishAnswer方法中，通过传入的question.id取answer[questionId]即可拿到对应输入框的内容，提交成功后将对应键的值置空即可重置输入框。

注意：建议把模板中循环生成的固定id属性移除，或改为动态绑定唯一值（比如:id="'divQuestion_' + question.id"），避免id重复引发的异常。

内容的提问来源于stack exchange，提问作者João Resende