Linking v-model in child to parent value vue js

Question

I have a vue component which is as follows and in the child template I have a text input which I want to use v-model to link it to a var in the parent. But its not working. How would I be able to achieve this?

I'm currently using Vue.js 1.23 (needing to use it for certain reasons so upgrading isn't an option)

Thank you

// this is in my Vue app
textWidget: ''

// this is called directly in the page.html
<text-widget v-show="getCurrentWidgetType() == 'text-widget'" :textWidget="textWidget"></text-widget>

// declaring the component just before my main vue app
Vue.component('text-widget', {
    template: `{% include('templates/widgets/text.html.twig') %}`,
    date: function () {
        return {
            textWidget:textWidget
        }
    }
})

Update :

// declared just before my Vue app
Vue.component('text-widget', {
    template: `{% include('templates/widgets/text.html.twig') %}`,
    props: ['textwidgetmodel']
})

// text input in the component child
<input type="text" v-model="textwidgetmodel">

// html in the main html page
// this input was just for testing. This confirmed that the props binding did indeed work, 
// the only problem is it seems to be a one way binding from parent to child. 
// I assume this because when I change the value with the text input below then it changes the value even in the component element. 
// But when a value in inputted into the child text input nothing happens to the value in the partent
<input type="text" v-model="textWidget" />

<text-widget v-show="getCurrentWidgetType() == 'text-widget'" :textwidgetmodel=textWidget></text-widget>

Belmin Bedak Belmin Bedak · Accepted Answer · 2017-02-08T11:26:31

Okay, so I guess there is somewhere the input element that has model binded to the textWidget, something like this:

<input type="text" v-model="textWidget"/>

And you want to send this to your child component via props, so you did It like this

<text-widget v-show="getCurrentWidgetType() == 'text-widget'" :textWidget="textWidget"></text-widget>

This is almost good, but not enough because props in template should be formatted in the kebab-case, so this is correct setup

<text-widget v-show="getCurrentWidgetType() == 'text-widget'" :text-widget="textWidget"></text-widget>

And then you should define that prop into the component logic, so Vue can know what to use (you don't need data model here now, except you have some another component based data):

// declaring the component just before my main vue app
Vue.component('text-widget', {
    template: `{% include('templates/widgets/text.html.twig') %}`,
    props: ['textWidget']
})

Linking v-model in child to parent value vue js

1 Answers