Question

在与单选或复选框用户同伴建立v模型后，我使用了model选项来使用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-model值为1 选中启用了值1的单选按钮。

如果删除：从radioCustomComponent中选中，则将发生意外故障。（但是，该值已绑定到v模型。

v模型用于定义自定义组件（无线电，复选框）

0 个答案: