Блог

Я пытаюсь поддерживать v-model двустороннюю привязку для моего собственного компонента ( my-component ), который построен поверх другого внешнего компонента библиотеки ( multiselect ).

Например, у меня есть

 Vue.component('my-component', {
    props: ['value'],
    delimiters: ['[[', ']]'],
    components: {
        Multiselect: window.VueMultiselect.default
    },
    data() {
        return {
           
        }
    },
    methods: {
        
    },
    template: `<multiselect
                    v-model="value">
                </multiselect>`
})
 

Итак, теперь я хочу иметь что-то вроде этого:

 <div id='#vue-wrapper'>
     <async-select :value="foo"></async-select>
</div>


new Vue({
    el: '#vue-wrapper',
    components: { VueMyComponent: "async-select" },
    data: {
       foo: null
    },
    watch: {
       foo(){
         console.log('Wow, foo has changed. Now foo =', this.foo);
       }
    },
 

Возможно ли это? Я хочу привязать переменную foo (которая передается как prop to my-component ) к v-модели multiselect

Я создал JSFIddle, чтобы проиллюстрировать это.

Вам нужно будет использовать промежуточную локальную переменную:

 props: ['value'],
data: () => ({localValue: this.value}),
template: `<multiselect v-model="localValue" />`,
watch:
{
  localValue(newVal, oldVal)
  {
    if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) this.$emit('input', newVal)
  },
  value(newVal, oldVal)
  {
    if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) this.localValue = newVal
  }
}