Vue add property to data root level and make it reactive

Question

Consider below code:

let myData = {
    a: 1
}

const app = new Vue({
    data: myData
});

As Vue docs says when we try to add a property like below, the new property isn't reactive:

myData.b = 12;
console.log(app.b); // undefined

Vue docs suggests using Vue.set:

Vue.set(myData, 'b', 12);
console.log(app.b); // still undefined

Vue docs says Vue.set adds a property to a reactive object!

But I want to add b to the data's root level. I don't know how to make b reactive.

I think you are looking for watchers, for example: https://stackoverflow.com/questions/42133894/vue-js-how-to-properly-watch-for-nested-data — yuri, Apr 22 '20 at 14:07
@yuri, Thanks. The question is simple: How to create a root level property and make it reactive? `Vue.set` only works if we are adding to nested properties. — AliN11, Apr 22 '20 at 14:10
i need to know that use case in order to suggest the best pattern — Boussadjra Brahim, Apr 22 '20 at 15:04

score 3 · Accepted Answer · edited Jul 15 '22 at 21:42

The docs clearly say you cannot add top level keys.

Vue does not allow dynamically adding new root-level reactive properties to an already created instance.

You must add a key to the root level object so you can update it later.

You can either:

create a key with a default value that you'll update. This means that you know the key before hand
create an empty object with a generic key (for instance dynamicProps) and use Vue.set to add dynamic keys at runtime to it.

score 1 · Answer 2 · answered Apr 22 '20 at 14:16

The question is simple: How to create a root level property and make it reactive?

The properties in data are only reactive if they existed when the instance was created. That means if you add a new property, like:

myData.b = 12;

Then changes to b will not trigger any view updates. If you know you'll need a property later, but it starts out empty or non-existent, you'll need to set some initial value. For example:

let myData = { a: 1, b: 0 }
// or,
let myData = { a: 1, b: null }

Now you can see changes to b are showing in the UI also:

let myData = { a: 1, b: 0 }
const app = new Vue({
  el: "#myApp",
  data: myData
})

myData.b = 12;
console.log(app.$data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="myApp">
  <pre>{{ b }} </pre>
</div>

Thanks. I knew this works and it's a good alternative. But I wanted to know if it is possible to add a dynamic root-level property which name is unknown. Apparently it's not possible. — AliN11, Apr 22 '20 at 15:03

score 0 · Answer 3 · answered Apr 22 '20 at 14:21

I can't find in documentation if you can add property to the root level and make it also reactive, but there is alternative solution.

let myData = {
    obj: {
     a: 1
    }
}

const app = new Vue({
    data: myData,
    watch: {
      obj: {
        handler(val) {
          console.log('watching !', val)
        },
        deep: true
      }
    }
});

Vue.set(app.obj, 'b', 12)

console.log(app.$data)

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Thanks but you are adding a property to a nested object. As a result it is reactive just by using `Vue.set(app.obj, 'b', 12)` . No watcher needed. — AliN11, Apr 22 '20 at 14:56

Vue add property to data root level and make it reactive

3 Answers3

Linked

Related