Vue компонент, наблюдаемые данные не работают, как ожидалось - PullRequest
Новая
       7

Vue компонент, наблюдаемые данные не работают, как ожидалось

0 голосов
/ 20 февраля 2019

https://jsfiddle.net/misaka1008/z24c0suf/1/
У меня есть образец, как указано выше, когда я нажимаю на радио "Мужской" в первом ряду, мне нужно дважды щелкнуть для выбора "Мужской". 

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

если я комментирую this.checked = val , все будет работать правильно.если нет комментария, при первом щелчке, после выполнения this.checked = val , автоматически возвращается значение «Женский».
Почему это так работает?Как я могу это исправить?

1 Ответ

0 голосов
/ 20 февраля 2019

Вам нужно изменить :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

...