У меня есть этот компонент
<template>
<div class="row py-2">
<div class="col-sm-12">
<v-checkbox @clicked="changeStatus($event)" :val="checkFont" :key="'checkfont'">
<span>Activar/Desactivar</span>
</v-checkbox>
</div>
<transition name="fade">
<div class="col-sm-12" v-if="checkFont == true">
<div v-for="(type, key) in types">
<div class="my-2">
<h5 class="text-capitalize">{{ type.label }}</h5>
</div>
<div class="my-2">
<v-selectpicker :input-name="fieldName(type.label)" :properties="fonts" :has-addon="false" field="family" :notlang="true" @optionselected="getFont($event, key)"></v-selectpicker>
</div>
<div class="" v-if="type.font !== ''">
<div v-for="(v, index) in getVariants(key)" :key="index">
<v-checkbox @clicked="setVariant($event, key, v)" :val="variantText(v)" :key="index">
<span>{{ variantText(v) }}</span>
</v-checkbox>
</div>
</div>
</div>
</div>
</transition>
</div>
</template>
<script>
const SelectPicker = () => import('../admin/selectpicker')
const CustomCheckbox = () => import('./customCheckbox')
export default {
data : function() {
return {
fonts : [{family : ''}],
types : {
headers : {
label : 'Titulos',
font : '',
variant : ''
},
paragraphs : {
label : 'parrafos',
font : '',
variant : '',
},
links : {
label : 'Links',
font : '',
variant : '',
}
},
checkFont : false
}
},
created : function() {
this.getFonts();
},
components : {
'v-selectpicker' : SelectPicker,
'v-checkbox' : CustomCheckbox
},
methods : {
getFonts : function() {
axios.get('https://www.googleapis.com/webfonts/v1/webfonts?sort=popularity&key=AIzaSyBUjWSsTwBeOFXwHYga8YQZIDauLiS8Gy8').then((response) => {
this.fonts = response.data.items;
});
},
fieldName : function(field) {
return field.toLowerCase()
},
getFont : function($event, key) {
this.types[key].font = $event.option;
this.getVariants(key);
},
changeStatus : function($event) {
console.log($event)
this.checkFont = !this.checkFont;
},
getVariants : function(key) {
return this.fonts.filter((element) => element.family == this.types[key].font)[0].variants;
},
setVariant : function($event, key, v) {
console.log('variant clicked');
console.log($event);
this.types[key].variant = v;
},
variantText : function(v) {
return v.indexOf('00') !== -1 ? v.split('00').join('00 ') : v;
}
}
}
</script>
Это компонент v-checkbox.
<template>
<div class="cntr">
<label for="cbx" class="label-cbx">
<input id="cbx" type="checkbox" :model="val" class="invisible" @change="checked = checkCheckbox(checked)" :checked="checked">
<div class="checkbox">
<svg width="20px" height="20px" viewBox="0 0 20 20">
<path d="M3,1 L17,1 L17,1 C18.1045695,1 19,1.8954305 19,3 L19,17 L19,17 C19,18.1045695 18.1045695,19 17,19 L3,19 L3,19 C1.8954305,19 1,18.1045695 1,17 L1,3 L1,3 C1,1.8954305 1.8954305,1 3,1 Z"></path>
<polyline points="4 11 8 15 16 6"></polyline>
</svg>
</div>
<slot></slot>
</label>
</div>
</template>
<script>
export default {
props : ['val'],
data : function() {
let data = {
checked : false
};
return data
},
methods : {
checkCheckbox : function(checkbox) {
this.$emit('clicked', {
value : this.val
});
let status = eval(checkbox) == true ? false : true;
return status;
}
}
}
</script>
Проблема в v-checkbox, все работает, пока я не нажму один издинамический v-флажок в v-for="(v, index) in getVariants(key)" :key="index" всякий раз, когда я щелкаю по одному из них, the v-checkbox :key="'checkfont'" срабатывает, поэтому значение checkFont prop изменяется
Я проверяю компонент с помощью vue devtools, и я вижучто опора :val имеет правильное значение, но при нажатии событие генерирует логическое значение, а затем срабатывает @clicked="changeStatus($event)", почему это происходит?я не могу использовать такой компонент?как я могу это исправить?