VUE 变量更新页面无响应的问题

MR洁儿

于 2022-07-06 13:49:27 发布

阅读量1.2k

点赞数 1

文章标签： Vue 前端

本文链接：https://blog.csdn.net/u012131835/article/details/125636131

版权

在Vue项目中遇到变量更新但视图未刷新的问题。原因是Vue在实例创建后添加新属性不会触发视图更新。解决方法是使用Vue.set或this.$set向对象添加响应式属性。

摘要由CSDN通过智能技术生成

问题描述：

最近在做项目的时候，遇到了一个问题：根据接口返回，给变量赋予了新的值，但是页面上却不刷新。

我们都知道VUE是双向数据绑定的，变量赋值更新后，试图会同步做刷新，但是这里却一直刷不到新得值，非常的费解。

赋值代码如下：

export default {
    name:'Detail',
    data() {
        return {
           arrayList:[
                {
                    "code": "600266",
                    "name": "XXX1",
                },{
                    "code": "600166",
                    "name": "XXX2",
                },{
                    "code": "600066",
                    " name": "XXX3",
                }
           ],     
        }
    }
    mounted(){
      this.arrayList.forEach((item) => {
           item.state = true
                        
      })
    }
    methods: {
        onClick(){
           this.arrayList[0].state &