Vue.js - 将同名的单选元素绑定到数组答案

【问题标题】：Vue.js - Binding radio elements of same name to arrayVue.js - 将同名的单选元素绑定到数组
【发布时间】：2015-12-21 02:58:47
【问题描述】：

我是 Vue.js 新手，遇到了一个特殊情况。我有多个无线电组，我想将它们绑定到单个 Vue.js 数据数组。这似乎按预期工作，直到您输出结果数组。

Vue.js 正在创建一个（任意？）包含许多未定义元素的长数组。该数组还包含正确的值。下面的示例既将结果记录到控制台，也将结果输出到文本框，您可以在其中看到所有额外的逗号。

jQuery(document).ready(function($) {
  var vm = new Vue({
    el: '#quiz-layout',
    data: {
      'question': []
    },
    watch: {
      question: {
        handler: function(v) {
          console.log(v);
        },
        immediate: true,
      }
    }
  });
});

<!doctype html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://cdn.jsdelivr.net/vue/1.0.12/vue.min.js"></script>
</head>

<body>
  <form id="quiz-layout">
    <h4>What is your name?</h4>
    <label for="question_0_answer_0">Bob</label>
    <input type="radio" name="question[0]" value="bob" id="question_0_answer_0" v-model="question[0]" />
    <br />
    <label for="question_0_answer_1">Jim</label>
    <input type="radio" name="question[0]" value="jim" id="question_0_answer_1" v-model="question[0]" />
    <br />

    <h4>How old are you?</h4>
    <label for="question_1_answer_0">10</label>
    <input type="radio" name="question[1]" value="10" id="question_1_answer_0" v-model="question[1]" />
    <br />
    <label for="question_1_answer_1">54</label>
    <input type="radio" name="question[1]" value="54" id="question_1_answer_1" v-model="question[1]" />
    <br />
    <input type="text" value="{{question}}" />
  </form>
</body>

</html>

结果数组应该只有两个元素长，而不是十一个。所有额外的元素来自哪里？

【问题讨论】：

标签： javascript arrays vue.js

【解决方案1】：

我查看了您的问题，发现Vue.js 的核心存在错误。

不过，我在 GitHub 上发了pull request，正在等待创建者的回复。

当错误修复后，我会更新这个答案。

编辑

已修复的错误。

【讨论】：

很高兴看到我没有发疯。感谢您的帮助。