Я использовал опцию модели, чтобы использовать 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-модели.