Question

我将vue.js用作使用pug的页面的前端框架，如果选择更改，我试图更改单选按钮的值。值更改成功，但是vue.js无法获得新值。形式如下：

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 }}

Answer 1

vue.js和其他类似库的目的是消除直接的DOM操作。相反，您应该将数据绑定到DOM并更改该数据，以便vue可以根据所做的更改来更新DOM。

这是一个例子：

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;
      }
    }
  }
});

这是jsfiddle链接：https://jsfiddle.net/wp590gyv/14/

您还应该检查：https://vuejs.org/v2/guide/

Vue.js无法获得单选按钮的新值

1 个答案: