CODEWITHSUNDEEP
javascriptarraysvue.js
user2986145
user2986145

Reputation: 3

Vue.js - Binding radio elements of same name to array

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?

Upvotes: 0

Views: 1223

Answers (1)

pespantelis
pespantelis

Reputation: 15382

I reviewed your issue and I found a bug to the core of Vue.js.

However, I made a pull request to the GitHub and I'm waiting the response from the creator.

I'll update this answer when the bug fixed.

Edit

The bug fixed.

Upvotes: 2

Related Questions