如何检查当前数组项的具体值？答案

【问题标题】：How to check specific value of current array item?如何检查当前数组项的具体值？
【发布时间】：2018-12-21 05:13:19
【问题描述】：

假设我有以下（动态创建的）数组用于测验的问题选项：

"choices": [
    {
        "choice": "yes",
        "correct": 1
    },
    {
        "choice": "No",
        "correct": 0
    },
    {
        "choice": "Maybe",
        "correct": 0
    },

]

我像这样遍历它们：

<div class="form-group" v-for="choice in choices">
    <label><input type="radio">{{ choice.choice }}</label><br>
</div>

这会为数组中的每个选项正确输出单选输入元素。我的问题是，当单击其中一个选项时，我将如何检查“正确”是否为真？

希望超级英雄能帮助我。

【问题讨论】：

可以通过多种方式检查是否按下了正确的选项。问题是，你想如何应对它？只是在视图中，还是您想在某处跟踪分数？是否也有提交按钮，还是立即响应？
没有下一个问题的按钮，但如果我知道如何在单击其中一个选项时返回响应，我就能弄清楚如何在按钮上实现它。

标签： laravel vue.js vuejs2 vue-component vue-router

【解决方案1】：

使用您现有的代码，

您只需将onChange 事件侦听器添加到选项中并传递选项的index。该索引用于确定它是哪个选项。

所以你的模板应该是这样的：

<div id="app">
    <div class="form-group" v-for="(choice, index) in choices">
        <label><input type="radio" @change="choiceSelected(index)">{{ choice.choice }}</label><br>
    </div>
</div>

您的脚本将如下所示：

new Vue({
      el: "#app",
      data: {
        "choices": [
        {
            "choice": "yes",
            "correct": 1
        },
        {
            "choice": "No",
            "correct": 0
        },
        {
            "choice": "Maybe",
            "correct": 0
        },

    ]
  },
  methods: {
    choiceSelected: function(choice_index) {
        var target_choice = this.choices[choice_index];

          if (target_choice.correct) {
                alert('Your answer is correct!');
          } else {
                alert('Your answer is incorrect :(');
          }

    }
  }
})

或者看看这个 JS Fiddle :) https://jsfiddle.net/eywraw8t/166234/

【讨论】：

【解决方案2】：

Vue 和 React 等 ui 框架的使用与 jQuery 等实用程序库有很大不同。哦，它们的工作原理有一定的道理，在这种情况下，最好记住它们将数据绑定到 DOM。在处理您概述的任务时，这变得很重要。您似乎希望在比所需级别更低的级别上处理管理交互的任务。

这是一个示例，它将根据选择更新选择的值

<div id="app">
  <h2>Choices:</h2>
  <ol>
    <li class="form-group" v-for="(choice, index) in choices">
      <label>
        <input
               name="choices"
               type="radio"
               v-model="selectionIndex"
               :value="index" 
               >
        {{ choice.choice }}
      </label><br>
    </li>
  </ol>
  <pre>{{ selection }}</pre>
</div>

脚本

new Vue({
  el: "#app",
  data: {
    choices: [
      {
        "choice": "yes",
        "correct": 1
      },
      {
        "choice": "No",
        "correct": 0
      },
      {
        "choice": "Maybe",
        "correct": 0
      }


    ],
    selectionIndex: null,
  },
  computed:{
    selection() {
        return this.choices[this.selectionIndex] || null;
    }
  },
})

小提琴： https://jsfiddle.net/eywraw8t/164706/

通过使用 v-model，selectionIndex 的值随数组索引更新。然后可以使用计算值来获取使用 selectionindex 和选择数组以返回所选选项。

接下来，您可以在按下检查correct 值的按钮后添加一个函数。如果selectionIndex === null，您可以将按钮设置为禁用

【讨论】：