[Vuejs]-How to use controlled components in Vue to set values in parent component object

by

0👍

✅

I can think of two solutions. First solution, just use prop not two-way binding:

For parent-comp.vue

<filter-comp :obj="filterObj"></filter-comp>

And for filter-comp.vue

<template>
  <div>
    <v-select :items="items" v-model="obj.filterOne"></v-select>
    <v-select :items="items" v-model="obj.filterTwo"></v-select>
  </div>
</template>

...
  props: {
    obj: {
      type: Object,
      default: {}
    }
  }
...

JSFiddle

Second solution, use v-model as you described:

For filter-comp.vue

<template>
  <div>
    <v-select :items="items" @change="change('filterOne', $event)"></v-select>
    <v-select :items="items" @change="change('filterTwo', $event)"></v-select>
  </div>
</template>

...
  methods: {
    change(name, value) {
      this.$emit('input', {
        ...this.value,
        [name]: value
      })
    }
  }
...

JSFiddle

Leave a comment