Как заставить пользователя выбрать хотя бы один вариант go на следующую страницу Vue JS

Question

Я работаю над приложением Quiz, используя Laravel и Vue JS.

Я хочу, чтобы пользователь должен был выбрать один вариант из предложенных четырех вариантов до go для перехода на следующую страницу. другим способом NEXT вариант Я хочу отключить до тех пор, пока пользователь не должен выбрать хотя бы один вариант. Я использую разбиение на страницы, то есть по одному вопросу на странице. Вот скриншоты моей программы:

=> компонент. vue:

  <li v-for="choice in question.answers">
    <label>
      <input type="radio"
        :value="choice.is_correct==true?true:choice.answer"
        :name = "index"
        v-model = "userResponses[index]"
        @click = "choices(question.id, choice.id)"
      >
      {{choice.answer}}
    </label>
  </li>

=> компонент. vue: при запуске опция не выбрана

data() {
  return {
    questions: this.quizQuestions,
    questionIndex: 0,
    userResponses: Array(this.quizQuestions.length).fill(false),
    currentQuestion: 0,
    currentAnswer: 0,
  }
},

=> компонент. vue: следующая кнопка

<div v-show="questionIndex!=questions.length">
  <!--  <button v-if="questionIndex>0" class="btn btn-success float-right"@click="prev()">Prev</button>  -->
 <button class="btn btn-success" @click="next();postuserChoices()">Next</button>

=> лезвие. php

Answer 1

Добавьте к вашему методу next() следующее:

if (!this.userResponses[this.index]) { return }

Примечание: существует множество предположений, на которых основан этот ответ. Я предполагаю, что userResponses и index определены как данные вашего компонента, и вы написали свой метод next.

Еще одно примечание: правильно ли я вижу, что вы устанавливаете значение ввода как true для правильный ответ? Это ужасная идея - в основном это означает, что я могу проверить html, чтобы получить 100% результатов вашего теста.