[Vuejs]-Vue.js cannot get the new value of radio button

by

2👍

The purpose of vue.js and other similar libraries is to eliminate direct DOM manipulations. Instead you should bind your data to DOM and change that data so vue could update the DOM based on what changes have been made.

Here’s an example:

HTML:

<div id="container">
    <select @change="onSelect">
      <option v-for="option in options" :value="option.value">{{ option.name 
      }}</option>
    </select>
    <div>
      <input type="radio" id="one" value="One" :checked="oneChecked">
      <label for="one">One</label>
      <input type="radio" id="two" value="Two" :checked="twoChecked">
      <label for="two">Two</label>
    </div>
</div>

JS:

 var v = new Vue({
  el: "#container",
  data: function() {
    return {
        oneChecked: true,
        twoChecked: false,
        options: [
          {
             value: "option_1",
             name: "option_1"
          },
          {
             value: "option_2",
             name: "option_2"
          }
        ]
     }
  },

  methods: {
    onSelect: function(event) {
        var value = event.target.value;
  
      if (value === "option_1") {
         this.oneChecked = true;
         this.twoChecked = false;
      } else if (value === "option_2") {
         this.oneChecked = false;
         this.twoChecked = true;
      }
    }
  }
});

Here’s jsfiddle link: https://jsfiddle.net/wp590gyv/14/

You should also check: https://v2.vuejs.org/v2/guide/

👤SciFiThief

Leave a comment