我在vue.js组件中的复选框有问题。 我的想法是在子事件(更改)上更新父模型。
<parent-component>
<checkbox-component name="This is name"
:id="'This is Id'"
:val="'test'"
v-model="details"
>
<checkbox-component name="This is name 2"
:id="'This is Id 2'"
:val="'test2'"
v-model="details"
>
</checkbox-component>
</parent-component>
这是组件代码:
<template>
<div>
<input type="checkbox"
:name="name"
:id="id"
:value="val"
v-on:change="update($event)"
autocomplete="off"
/>
<div class="btn-group">
<label :for="id" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-ok"></span>
<span> </span>
</label>
<label :for="id"
class="btn btn-default active btn-sm">
{{ name }}
</label>
</div>
</div>
</template>
<script>
export default {
model: {
event: 'change'
},
props: {
id: {
required: true,
type: String
},
name: {
required: true,
type: String
},
val: {
required: true,
type: String
},
},
methods: {
update(event){
this.$emit('change',event.target.value);
}
},
}
</script>
我想将复选框值存储在详细信息数组中,并像在https://vuejs.org/v2/guide/forms.html#Checkbox中一样对其进行更新
现在正在发生的事情是,details []变成具有选定复选框值的字符串详细信息。
是否有一些干净的解决方案,或者我需要编写方法来检查值是否在数组中并将其切片/推入?