javascript - 在 vue.js 中更新数据属性/对象

Question

有没有办法以编程方式更新 vue.js 中的 data 对象/属性？例如，当我的组件加载时，我的数据对象是:

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

在触发事件后，我希望 data 对象看起来像:

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

我试过:

<script>

module.exports = {

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

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

    props: []

}

</script>

但这给了我错误this.set is not a function。有人可以帮忙吗？

提前致谢!

Answer 1

Vue 不允许向已创建的实例动态添加新的根级响应式属性。但是，可以向嵌套对象添加响应式属性，因此您可以创建一个对象并添加一个新属性，如下所示:

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

并添加带有 vm.$set 的属性方法:

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

对于 vue 1.x 使用 Vue.set(this.someObject, 'planes', true)

reactivity