Question

https://jsfiddle.net/misaka1008/z24c0suf/1/
我有上面的示例，当我单击第一行的“男性”收音机时，我需要单击两次以选择“男性”。

selectChanging: function(val){
    this.checked = val;
}

如果我评论 this.checked = val ，它将正常运行。如果没有评论，则在第一次单击后，执行 this.checked = val 后，它会自动选择回到“女性”。
为什么会这样工作？我该如何解决？

Answer 1

您需要更改:checked="value == keyValue"才能生效

Vue.component("radio-button", {
    props: ["keyValue", "name", "value"],
  template: `<label class="nts-radiobox">
              <input ref="radio" type="radio" :name="name" v-bind:value="keyValue" :checked="value == keyValue" @change="changed(keyValue)"/>
              <i class="fa fa-circle-o"></i>
              <slot></slot>
                    </label>`,
    methods: {
            changed: function(value){
                    this.$emit('change', value);
            }
    }
});

在jsfiddle上的演示

Vue组件，观察到的数据未按预期运行

1 个答案: