Update property / data object in vue.js

Question

Is there a way to programmatically update an object / property datain vue.js? For example, when my component loads, my data object:

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

And after triggering the event, I want the object to datalook like this:

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 that gives me an error this.set is not a function. Can anyone help?

Thanks in advance!

Answer 1

Vue does not allow dynamically adding new reactive properties at the root level to an already created instance. However, you can add reactive properties to a nested object. So you can create an object and add a new property like this:

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

set:

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

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

reactivity