CODEWITHSUNDEEP
jqueryvue.js
Dranier
Dranier

Reputation: 321

Vue.js cannot get the new value of radio button

I am using vue.js as the front end framework of a page that is using pug, I tried to change the value of the radio button if the select is changed. The change in the value is successful but vue.js cannot get the new value. Here is the form: 

script.
  $(document).ready(function (){
    $('#month').change(function (){
      $('#trial').val('SDFSDFA');
    });
  });
#monthly.col-sm-12
  .col-sm-12
    select#month.form-control(v-model='selected')
      option(disabled='', value='') Please select month
      option January
      option February
      option March
      option April
      option May
      option June
      option July
      option August
      option September
      option October
      option November
      option December
    input#trial(type='radio', value='', v-model='picked')
    label(for='one') One
    br
    input#two(type='radio', value='Two', v-model='picked')
    label(for='two') Two
    br
    span Picked: {{ picked }}

Upvotes: 0

Views: 1636

Answers (1)

SciFiThief
SciFiThief

Reputation: 586

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/

Upvotes: 2

Related Questions