поддержка v-модели для компонента, построенного поверх другого компонента


поддержка v-модели для компонента, построенного поверх другого компонента

02.12.2020 10:28:57 Просмотров 59 Источник

Я пытаюсь поддерживать двустороннюю привязку v-model для моего собственного компонента (my-component), который построен поверх другого внешнего компонента lib (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 (который передается в качестве опоры для my-component) на V-модель multiselect

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

У вопроса есть решение - Посмотреть?

Ответы - поддержка v-модели для компонента, построенного поверх другого компонента / v-model support for a component that is built on top of another component

Является ответом!
IVO GELOV

02.12.2020 11:14:18

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

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
  }
}
Помочь в развитии проекта:
Закрыть X