This special wrapper I created for the Vue-multiselect package acts as a child component within this scenario.
<template>
<div>
<multiselect
v-model="items"
:options="filteredList"
:multiple="multiple"
:close-on-select="multiple ? false : true"
:show-labels="false"
:placeholder="placeholder"
track-by="id"
:label="label"
@input="inputChanged"
:internal-search="false"
@search-change="searchItems"
>
</multiselect>
</div>
</template>
<script>
export default {
model: {
prop: 'parentItems',
event: 'change',
},
props: ['multiple', 'list', 'placeholder', 'label', 'parentItems'],
data() {
return {
items: this.parentItems,
filteredList: this.list,
}
},
methods: {
searchItems(query) {
let q = latinize(query.toLowerCase().replace(/\s/g,''))
this.filteredList = this.list.filter(li => latinize(li[this.label].toLowerCase().replace(/\s/g,'')).includes(q))
},
inputChanged() {
this.$emit('change', this.items)
this.$emit('filters-changed')
},
resetItems() {
this.items = this.multiple ? [] : null
},
},
}
</script>
The parent element structure is as follows:
<custom-multiselect
v-model="car"
:multiple="false"
:list="cars"
placeholder="Car"
label="pseudo_id_name"
></custom-multiselect>
I am considering not using items and only relying on parentItems, which triggers a warning:
[Vue warn]: Avoid mutating a prop directly since the value
will be overwritten whenever the parent component re-renders.
Instead, use a data or computed property based on the prop's value. Prop being mutated: "parentItems"
What exactly triggers a parent component to re-render? In my tests, this setup solved synchronization without any issues. If using the prop as data was acceptable in my case, is there a way to suppress this warning?
If this approach is still incorrect, I would appreciate guidance on how to ensure proper synchronization of items. Despite researching similar issues on Stack Overflow, I'm still unclear about the solution.
Currently, with my v-model setup, changes are properly emitted to the parent. However, I am facing challenges implementing synchronization in the opposite direction.
For instance, when the parent calls resetForm() to set this.car = null, the child component is unaware that items should also become null. How can I listen for this event effectively?