CODEWITHSUNDEEP
vue.js
Svetoslav Dimitrov
Svetoslav Dimitrov

Reputation: 929

Vue.js change template data

I have the following code:

Vue.component('greeting', {
    template: `<h1>{{ greeting }}</h1>`,

    data: function () {
        return {
            greeting: app.text
        }
    },
});

var app = new Vue({
    el: '.app',
    data: {
        text: 'Hello'
    },
    methods: {
        changeText: function () {
            this.text = 'Goodbye'
        }
    }
});

So when I call changeText method it changes text but greeting in the component is not updated. I didn't understand if I should use props, watcher or computed property in this case.

Upvotes: 0

Views: 2867

Answers (1)

Tomer
Tomer

Reputation: 17940

You need to pass it as a prop to the component:

Vue.component('greeting', {
    template: `<h1>{{ greeting }}</h1>`,
    props: ['greeting']
});

and the html:

<greeting :greeting="text"></greeting>

Upvotes: 2

Related Questions