поддержка v-модели для компонента, построенного поверх другого компонента
Я пытаюсь поддерживать двустороннюю привязку 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
Является ответом!
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
}
}
Помочь в развитии проекта: