如何强制用户选择至少一个选项以转到下一页 Vue JS答案

【问题标题】：How can I force user to choose at least one option to go to next page Vue JS如何强制用户选择至少一个选项以转到下一页 Vue JS
【发布时间】：2020-10-09 14:13:55
【问题描述】：

我正在使用 Laravel 和 Vue JS 开发测验应用程序。

我希望用户必须从给定的四个选项中选择一个选项才能转到下一页。以其他方式 NEXT 选项我想禁用直到，除非用户不得选择至少一个选项。我使用分页，即每页一个问题。以下是我的程序的屏幕截图：

=> component.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>

=> component.vue：开始时没有选择任何选项

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

=> component.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>

=> blade.php

【问题讨论】：

请勿发布代码图片。编辑您的帖子并在代码块中发布相关代码。
现在请看！
index 是否在 li 中定义？如果您尝试使用循环中当前条目的index，请确保定义它：<li v-for="(choice, index) in question.answers"> 另外，我想您可以在下一个按钮中将disabled 绑定到userResponses[questionIndex]：<button class="btn btn-success"@click="next();postuserChoices()" :disabled="!userResponses[questionIndex]">Next</button>

标签： javascript html laravel vue.js

【解决方案1】：

将以下内容添加到您的 next() 方法中：

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

注意：此答案基于许多假设。我假设userResponses 和index 被定义为您的组件数据，并且您已经编写了next 方法。

另一个注意事项：我是否正确地看到您将输入值设置为 true 以获得正确答案？这是一个糟糕的主意——这基本上意味着我可以检查 html 以从你的测验中获得 100%。

【讨论】：