[Vuejs]-Vue2: handling multi-child prop synchronization with models

by

0👍

✅

There’s still a lot of code in the post that I’m not following, but I think the gist of your question is how to reflect the selected property from the <my-select> component through to the <select-container> component. If that’s the case, then the most straightforward approach is probably just to add a value and emit input events.

In the template, add an event handler for the native <select>

<select v-model="selected"  @input="onInput">

Then, in the code, reflect that event up to the parent. Also be sure to accept a value property from that parent.

export default {
  props: {
    value: null,
  },
  data: function() {
    return {
      selected: this.value
    }
  },
  methods: {
    onInput() {
      this.$emit("input", this.selected)
    }
  },
  watch: {
    value(newValue) {
      this.selected = newValue;
    }
  }
}

And then the parent can simply use the conventional v-model binding.

<my-select v-model="select"/>

Leave a comment