Utilizing controlled components, I am able to emit the selected value. For example,
// app-select.vue
<v-select :items="[1,2,3]" @change="$emit('input', $event)"></v-select>
// parent-component.vue
<app-select v-model="selectedValue" />
When the value of v-select is changed, it updates selectedValue on the parent component.
Now, what if I have an object that needs to be updated by a controlled component with multiple selectors:
parent-comp.vue
<template>
<filter-comp> v-model="filterObj"</filter-comp>
</template>
<script>
import FilterComp from './filtercomp'
export default {
components: {
FilterComp
},
data () {
return {
filterObj: {}
}
}
}
</script>
And a child component with input fields capable of emitting values:
<template>
<v-select :items="filterOneItems" @change="$emit('input', $event)">></v-select>
<v-select :items="filterTwoItems" @change="$emit('input', $event)">></v-select>
</template>
The objective is to update the parent component when there's an input on v-select like this:
filterObj: {
filterOne: 'value 1',
filterTwo: 'value 2'
}
Is there a way to achieve this functionality?