I've encountered an issue with a vue component where I'm trying to link a text input in the child template to a variable in the parent using v-model, but it doesn't seem to be working. How can I make this work?
Currently, I am using Vue.js 1.23 and cannot upgrade due to specific requirements.
Thank you
// This code is part of my Vue app
textWidget: ''
// Using the component in the page.html
<text-widget v-show="getCurrentWidgetType() == 'text-widget'" :textWidget="textWidget"></text-widget>
// Component declaration before the main Vue app
Vue.component('text-widget', {
template: `{% include('templates/widgets/text.html.twig') %}`,
date: function () {
return {
textWidget:textWidget
}
}
})
Update:
// Declared before the Vue app
Vue.component('text-widget', {
template: `{% include('templates/widgets/text.html.twig') %}`,
props: ['textwidgetmodel']
})
// Text input in the child component
<input type="text" v-model="textwidgetmodel">
// HTML in the main page
// The input below was for testing purposes and confirmed that props binding works.
// However, it appears to be one-way binding from parent to child. Changing the value in the text input updates the parent value,
// but changing the value in the child does not affect the parent.
<input type="text" v-model="textWidget" />
<text-widget v-show="getCurrentWidgetType() == 'text-widget'" :textwidgetmodel=textWidget></text-widget>