Vue2: Handling Multi-child Prop Synchronization With Models

I'm new to Vue (about a, and while reading the docs is very helpful it is often the case where I can not derive how I am supposed to achieve the desired behavior. I have made sever

Solution 1:

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.

exportdefault {
  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"/>