Update data property / object in vue.js

Question

is there a way I can programmatically update the data object / property in vue.js? For example, when my component loads, my data object is:

data: function () {
    return {
        cars: true,
    }
}

And after an event is triggered, I want the data object to look like:

data: function () {
    return {
        cars: true,
        planes: true
    }
}

I tried:

<script>

module.exports = {

    data: function () {
        return {
            cars: true
        }
    },

    methods: {
        click_me: function () {
            this.set(this.planes, true);
        }
    },

    props: []

}

</script>

But this gives me the error this.set is not a function. Can someone help?

Thanks in advance!

tony19 · Accepted Answer · 2022-07-15 19:57:32Z

24

Vue does not allow dynamically adding new root-level reactive properties to an already created instance. However, it’s possible to add reactive properties to a nested object, So you may create an object and add a new property like that:

data: function () {
    return {
        someObject:{
            cars: true,
    }
}

and add the property with the vm.$set method:

methods: {
        click_me: function () {
            this.$set(this.someObject, 'planes', true)
        }
    }

for vue 1.x use Vue.set(this.someObject, 'planes', true)

reactivity

edited Jul 15, 2022 at 19:57

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Nov 6, 2016 at 22:45

ABDEL-RHMAN

3,05419 silver badges24 bronze badges

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

2 Comments

Trung Tran Over a year ago

Hi - I tried that but I keep getting vue.common.js?e881:2964 Uncaught TypeError: exp.trim is not a function(…)

ABDEL-RHMAN Over a year ago

@user1547174 this is looks vue 1.x try this Vue.set(this.someObject, 'planes', true)

Collectives™ on Stack Overflow

Update data property / object in vue.js

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related