how to add new data elements dynamically in vue.js

Question

I'm using vue.js in a sort of an odd single page app, where I have areas that I dynamically load content into, and they interact with the others areas - ie none of the content is there at the start - I have a custom vue component that sort of works like v-html - but causes the new html to be parsed by vue.

And it all works great.

Except for data bindings. Any existing data bindings work perfectly - so if I have this:

   var data = 
   {
       some_string : "hello",
       some_object :  {
            whatever : 10
       }
   }

Any of the things I read later can quite happily interact with all of those variables - show them, bind both ways etc etc.

HOWEVER - I can't add anything new. If I try - it just doesn't get watched.

Which means that in my wonderful, completely dynamic, code is data environment - I have to go back and change the main template every time I want to create a new variable :(

Is there any command to be able to tell vue about a new variable, after it's been created? I'm imagining something like:

vue.watch_new_variable( data.new_object );

or even

vue.refresh_watches_of_data();

Answer 1

found it - was really simple - I have an object on data called global - and then I can just dynamically add to it with Vue.set - eg

Vue.set( data.global, "my_new_value", 10 );

and from then on, I can bind to, address, change global.my_new_value and it all seems to work perfectly.