Question

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

仅当您从输入中单击然后单击返回到输入，然后再次按下按钮时，触发checkAnswers方法的单击事件才起作用。第一次按下该按钮时应触发。

有人有什么想法吗？预先感谢。

<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

在此处使用模板语法存在一些基本问题。根据{{3}}的说法：

一个限制是每个绑定只能包含一个表达式，因此以下操作将无效：{{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数组，输入了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>

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

1 个答案: