I'm new to Vue.js and am having trouble with a particular case. I have multiple radio groups that I'd like to bind to a single Vue.js data array. This seems to work as expected until you output the resulting array.
Vue.js is creating an (arbitrarily?) long array with many undefined elements. This array also contains the correct values. My example below both logs the result to the console as well as outputs it to a textbox where you can see all of the additional commas.
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>The resulting array should only be two elements long, and instead is eleven. Where are all of the additional elements coming from?
