vue.js - Vue-JS v-show Percitence in radio

Question

v-show 在 radio (v-model) 时显示不正确请查找示例:https://jsfiddle.net/Lngocxrj/1/

<div id="helloWorldApp">
              <input type="radio" v-model="visible" value="true" name="optradio">hide
              <input type="radio" v-model="visible" value="false" name="optradio">show
  <div v-show="visible">
    Hello World
  </div>
  <p>
   {{visible}}
  </p> 

</div>

new Vue({
  el: "#helloWorldApp",
  data: {
    visible: true
  },
  methods: {
    show: function() {
      this.visible = !this.visible;
    }
  }
});

Answer 1

如果您使用方法来切换数据，它就可以工作。

HTML:

<div id="helloWorldApp">
  <label>hide<input type="radio" value="false" @click="inputClick(false)" name="optradio" /></label>
  <label>show<input type="radio" value="true" @click="inputClick(true)" name="optradio" /></label>
  <div v-show="visible">
    Hello World
  </div>
  <p>
    {{visible}}
  </p>
</div>

JavaScript:

new Vue({
  el: "#helloWorldApp",
  data: {
    visible: false
  },
  methods: {
    inputClick(val) {
      this.visible = val;
    }
  }
});