nuxt应用程序的动态v模型问题

Question

我正在尝试创建动态v模型输入。一切似乎都很好，除了以下。

触发checkAnswers方法的on click事件仅在您单击输入然后单击返回输入然后再次按下按钮时才有效。它应该在第一次按下按钮时触发。

有没有人有任何想法？提前致谢。

<template>
  <div class="addition container">
    <article class="tile is-child box">
      <div class="questions">
        <ul v-for="n in 5">
          <li>
            <p>{{ randomNumberA[n] }} + {{ randomNumberB[n] }} = </p>
            <input class="input" type="text" maxlength="8" v-model.number="userAnswer[n]">
            <p>{{ outcome[n] }}</p>
          </li>
        </ul>
      </div>
      <div class="button-container">
        <button @click="checkAnswers" class="button">Submit Answer</button>
      </div>
    </article>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        randomNumberA: [] = Array.from({length: 40}, () => Math.floor(Math.random() * 10)),
        randomNumberB: [] = Array.from({length: 40}, () => Math.floor(Math.random() * 10)),
        userAnswer: [],
        outcome: [],
      }
    },
    methods: {
      checkAnswers() {
        for (var i = 0; i < 6; i++) {
          if (this.userAnswer[i] === (this.randomNumberA[i] + this.randomNumberB[i])) {
            this.outcome[i] = 'Correct';
          } else {
            this.outcome[i] = 'Incorrect';
          }
        }
      }
    }
  }
</script>

Answer 1

您在此处使用模板语法时遇到一些基本问题。根据vue docs：

一个限制是每个绑定只能包含一个表达式，因此以下内容不起作用：{{var a = 1}}

如果要使用随机数填充数组，最好在页面安装上调用函数。像这样的东西：

mounted() {
  this.fillArrays()
},
methods: {
  fillArrays() {
    for (let i = 0; i < 5; i++) {
      this.randomNumberA.push(Math.floor(Math.random() * 10))
      this.randomNumberB.push(Math.floor(Math.random() * 10))
      this.answer.push(this.randomNumberA[i] + this.randomNumberB[i])
    }
  }
}

然后，您可以使用模板语法来显示数组。

看起来你正在为用户设置一个挑战来比较答案，所以我认为你最好有一个调用输入的函数：类似于：

<input type="whatever" v-model="givenAnswer[n-1]"> <button @click="processAnswer(givenAnswer[n-1])>Submit</button>

然后有一个比较答案的功能。

编辑

我基本上重写了你的整个页面。基本上你应该使用array.push()将元素插入数组中。如果你看一下这个，你会看到randomNumber和answer数组是在页面mount上填充的，输入了userAnswer数组，然后点击按钮上的结果。

<template>
  <div>
    <div >
      <ul v-for="n in 5">
        <li>
          <p>{{ randomNumberA[n-1] }} + {{ randomNumberB[n-1] }} = </p>
          <input class="input" type="text" maxlength="8" v-model.number="userAnswer[n-1]">
          <p>{{ outcome[n-1] }}</p>
        </li>
      </ul>
    </div>
    <div class="button-container">
      <button @click="checkAnswers" class="button">Submit Answers</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      randomNumberA: [],
      randomNumberB: [],
      answer: [],
      userAnswer: [],
      outcome: [],
    }
  },
  mounted() {
    this.fillArrays()
  },
  methods: {
    checkAnswers() {
      this.outcome.length = 0
      for (var i = 0; i < 6; i++) {
        if (this.userAnswer[i] === this.answer[i]) {
          this.outcome.push('Correct');
        } else {
          this.outcome.push('Incorrect');
        }
      }
    },
    fillArrays() {
      for (let i = 0; i < 5; i++) {
        this.randomNumberA.push(Math.floor(Math.random() * 10))
        this.randomNumberB.push(Math.floor(Math.random() * 10))
        this.answer.push(this.randomNumberA[i] + this.randomNumberB[i])
      }
    }
  }
}
</script>