v-модель Для определения пользовательских компонентов (радио, флажки) - PullRequest
0 голосов
/ 08 января 2019

Я использовал опцию модели, чтобы использовать v-модель после создания ее вместе с радио или флажком пользователя.

Была проблема, из-за которой флажок не работал, если значение символа было отброшено. Я решил проблему, как показано ниже. Интересно, это хороший способ?

<template>
<div class="hello">
    <h2>HelloWorld.vue :  {{ msg }}</h2>

    <RadioCustomComponent name="test" value="1" v-model="checkBoxValue2" />
    <RadioCustomComponent name="test" value="2" v-model="checkBoxValue2" />
    <RadioCustomComponent name="test" value="3" v-model="checkBoxValue2" />
    <span @click="checkBoxValueAlert">값 확인</span>

</div>
</template>

<script>
import RadioCustomComponent from "./radio/radioCustomComponent";

export default {
    name: 'HelloWorld',
    components: {RadioCustomComponent},

    props: {
        msg: String
    },

    data(){
        return {
            checkBoxValue2: '1',
        }
    },

    methods: {
        checkBoxValueAlert(){
            alert(this.checkBoxValue2)
        }
    }


}
</script>



<template>
<div>
    <input type="radio" :name="name" :value="value" @change="onChange" :checked="checked == value">
</div>
</template>

<script>
export default {
    name: "radioCustomComponent",
    props: {
        name: {type: String},
        value: {type:[String, Boolean]},
        checked: {type: [Boolean, String]}
    },

    model: {
        prop: 'checked',
        event: 'change'
    },

    methods:{
        onChange(e){
            console.log(e.target.checked)
            console.log(e.target.value)
            this.$emit('change', e.target.checked ? e.target.value : '')
        }
    },
}

мне нравится выше Если значение v-модели равно 1 Переключатель со значением 1 включен.

Если вы удалите: флажок из radioCustomComponent, вы получите неожиданную неисправность. (Однако значение привязано к v-модели.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...