#vue.js
#vue.js
Вопрос:
Я пытаюсь поддерживать 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, чтобы проиллюстрировать это.
Ответ №1:
Вам нужно будет использовать промежуточную локальную переменную:
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
}
}
Комментарии:
1. Смотрите обновленный вопрос. Я добавил скрипку для вас
2. Это работает просто отлично, если вы замените
:value="value"
наv-model="value"
в своей скрипке.