Nuxt应用中动态v-model点击事件异常问题求助

看起来你遇到的核心问题是Vue的数组响应式检测机制导致的，再加上代码里的一些细节偏差，让首次点击按钮时数据没有及时更新。我帮你拆解问题并给出修复方案：

问题根源 #

1. 数组响应式缺失：你初始化userAnswer和outcome为空数组，当通过v-model.number="userAnswer[n]"或this.outcome[i] = 'xxx'直接给数组索引赋值时，Vue默认无法检测到这类数组变化（Vue对数组的响应式监听只针对push/pop/splice等方法、修改数组长度，直接索引赋值不在监听范围内）。
2. 索引偏移问题：v-for="n in 5"会生成n=1,2,3,4,5，但数组索引从0开始，这导致你访问randomNumberA[n]时取的是第2到第6个元素，同时userAnswer的索引1-5未被初始化，Vue无法追踪这些位置的变化。
3. 循环次数不匹配：checkAnswers里循环i < 6（对应0-5），但你只渲染了5道题，多余的循环会导致无效操作。

修复步骤 #

1. 正确初始化响应式数组 #

在data里提前初始化userAnswer和outcome的长度，让Vue能追踪每个元素的变化：

data() {
  return {
    randomNumberA: Array.from({length: 40}, () => Math.floor(Math.random() * 10)),
    randomNumberB: Array.from({length: 40}, () => Math.floor(Math.random() * 10)),
    // 初始化5个元素的数组，对应5道题
    userAnswer: new Array(5).fill(null),
    outcome: new Array(5).fill(''),
  }
},

（顺便去掉了[] =这种冗余写法，直接赋值数组即可）

2. 修正v-for的索引使用 #

改用索引遍历，避免偏移问题：

<ul v-for="(_, index) in 5" :key="index">
  <li>
    <p>{{ randomNumberA[index] }} + {{ randomNumberB[index] }} = </p>
    <input class="input" type="text" maxlength="8" v-model.number="userAnswer[index]">
    <p>{{ outcome[index] }}</p>
  </li>
</ul>

这里用:key="index"是因为遍历的是固定长度数组，不会有列表重排问题，足够满足当前需求。

3. 调整checkAnswers的循环范围 #

让循环次数和题目数量一致：

checkAnswers() {
  // 循环0到4，对应5道题
  for (let i = 0; i < 5; i++) {
    const correctAnswer = this.randomNumberA[i] + this.randomNumberB[i];
    this.outcome[i] = this.userAnswer[i] === correctAnswer ? 'Correct' : 'Incorrect';
  }
}

（用let代替var，避免变量提升导致的潜在问题）

为什么之前的操作会生效？ #

你点击输入框外部再点击按钮时，输入框失去焦点，Vue会强制触发一次数据更新或页面重渲染，数组的变化被检测到，所以第二次点击按钮能正常工作。修复后首次点击按钮就能直接触发正确逻辑。

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