Question

假设我有一个（动态创建的）测验数组，它是问题的选择：

"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>

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

希望超级英雄可以帮助我。

Answer 1

像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-模型，使用数组索引更新selectionIndex的值。然后可以使用计算出的值来使用selectionindex和choices数组来返回选定的选项。

接下来，您可以在按下检查correct值的按钮之后添加一个功能。如果selectionIndex === null

，可以将按钮设置为禁用

Answer 2

使用现有代码，

您只需将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小提琴:) https://jsfiddle.net/eywraw8t/166234/

如何检查当前数组项的特定值？

2 个答案: