有没有一种方法可以通过编程方式更新vue中的data对象/属性.js?例如,当我的组件加载时,我的数据对象是:

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的误差.有人能帮忙吗?

提前谢谢!

推荐答案

Vue不允许向已创建的实例动态添加新的根级别被动属性.但是,可以向嵌套对象添加被动属性,因此可以创建一个对象并添加一个新属性,如下所示:

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

并使用set方法添加属性:

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

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

reactivity

Vue.js相关问答推荐

我在 nuxt2 中看不到索引页

Svelte 中的简单react 性实验以意想不到的方式失败了. Vue 等效项没有

手动触发对观察到的对象/数组的更新

拖入 vue2-google-map 后如何获取标记位置?

如何在 A-La-Carte 系统中使用 vuetify 加载程序时导入 vuetify/lib

在 Vue 文件中创建根 Vue 实例

如何将 vuejs 项目部署到 heroku

Laravel Vue - 如何让 vue 在公共文件夹中查找图像

Vue.js 从模板中分离样式

当前端和后端位于虚拟 docker 网络中时,如何使用 axios 寻址后端主机

Vuejs 2,VUEX,编辑数据时的数据绑定

Vue.js:从 parent父Vue 获取数据

v-for 如何在继续之前判断未定义的列表

Select 下拉列表中的复选框后如何清除 v-autocomplete(多个)搜索输入?

了解 Nuxt.js 中的State状态和Getters:Getters不起作用

VueJS错误避免直接改变props

脚本npm run dev和npm run watch是做什么用的?

Vue.js react性如何在幕后工作?

根据nuxt中的url参数动态加载组件

Vue.js 中的条件 依赖于props值?