Задача динамической v-модели в приложении nuxt

Question

Я пытаюсь создать динамический ввод v-модели.Все выглядит хорошо, за исключением следующего.

Событие on click, которое запускает метод 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

У вас есть некоторые основные проблемы с использованием синтаксиса шаблона здесь.Согласно 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 и ответов заполняются при монтировании страницы, массиве 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>