How to pass a reactive variable into Vue.js component?

Question

I can't find out how to pass a reactive variable into Vue.js component without using HTML templates.

I use this code for component rendering

var App = require('./app.vue').default;
var test = 'hey!';

var app = new Vue({
    el: '#app',
    data: {
        message: test
    },
    components: { App },
    render: h => h('app', { props: {message: test}})
})

It works fine and my component renders with 'hey', but the problem that I am facing is the fact that whenever I change

var test = 'hey!';

variable (in browser's developer console) then nothing seems to change in my component, it's only rendering 'hey'.

As I understand, I would have to pass

app.message

into my component to make it reactive, but how would I go about doing this? Or perhaps is there some other way to achieve this?

I set it up to work with Typescript and single file components in Webpack.

Kamil · Accepted Answer · 2017-01-26 17:04:11Z

1

I was able to find a solution, for anyone with a similar problem - you have to change your render to a function, like this

var App = require('./app.vue').default;

var app = new Vue({
    el: '#app',
    data: {
        message: 'hey!'
    },
    components: { App },
    render (h) {
        return h('app', {
            props: {
                message: this.message
            }
        })
    }
})

you can add this below to test it in your browser's developer console

window['vue_test'] = app;

then in developer console you can just type in

vue_test.message = 'new value!'

and HTML Dom should be updated with changes. Only data properties are reactive and that's why it didn't work before with this variable:

var test = 'hey!';

answered Jan 26, 2017 at 17:04

Kamil

911 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Matt Korostoff Over a year ago

great solution, I had the exact same problem

Collectives™ on Stack Overflow

How to pass a reactive variable into Vue.js component?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related