Currently troubleshooting a bug in another person's code and looking to minimize the amount of changes needed.
Encountering an issue where v-model binding in components is lost when using the $emit functionality to execute functions between child and parent components.
First, we have the parent component:
ParentComponent.vue
<template>
<child-component v-bind:items="this.items"
v-on:event_child="this.eventUpdater">
</child-component>
<template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
'child-component': ChildComponent
},
methods: {
getItemDetails() {
//...ajax request that loads item details for page.
},
eventUpdater: function(id) {
this.getItemDetails();
}
}
}
</script>
Next, we have the child component:
ChildComponent.vue
<template>
<div v-for="item in items">
<input v-model="item.itemId">
</div>
<button v-on:click="updateItems">update</button>
</template>
<script>
export default {
props: ['items'],
methods: {
updateItems() {
//...ajax call that updates items.
this.emitWhat();
},
emitWhat: function () {
this.$emit('event_child');
}
}
}
</script>
Following the update of the initial item (which works correctly), attempting to update another item results in the v-model for that item not functioning properly. Is the $emit functionality disrupting the v-model binding after the initial load? How can this issue be resolved?