The reference material can be found here:
https://v2.vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model
seems a bit confusing to me regarding how to link multiple events to the same component:
In:
https://codesandbox.io/s/dawn-dust-2tno0?file=/src/components/EditCategory.vue
is this method correct for emitting multiple events (edit/delete category) related to the same prop:
<div
class="modal-body"
v-bind:taskItem="taskItem"
@click="$emit('edit-category', $event.target.taskItem)"
>
<slot name="name"> Edit Name </slot>
</div>
<div
class="modal-body"
v-bind:taskItem="taskItem"
@click="$emit('delete-category', $event.target.taskItem)"
>
<slot name="delete"> Delete Category </slot>
</div>
?
Model definition is as follows:
model: {
prop: "taskItem",
event: "edit-category",
},
props: {
taskItem: {
required: true,
type: Object,
default() {
return {};
},
},
},
The example in the documentation:
Vue.component('base-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: Boolean
},
template: `
<input
type="checkbox"
v-bind:checked="checked"
v-on:change="$emit('change', $event.target.checked)"
>
`
})
does not clearly explain how to connect more than one event per prop; like:
model: {
prop: 'checked',
event: 'event-a',
event: 'event-b',
},
?