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

时间:2016-11-06 19:14:42

标签: javascript vue.js

有没有办法可以在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。有人可以帮忙吗?

提前致谢!

1 个答案:

答案 0 :(得分:10)

Vue不允许向已创建的实例动态添加新的根级别响应属性。但是,可以将反应属性添加到嵌套对象中,因此您可以创建一个对象并添加一个新属性:

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

并使用set方法添加属性:

vue 1.x

Vue.set(this.someObject, 'planes', true)使用Map<char*, int>

reactivity