Vue中data数据变化后页面更新的问题

最新推荐文章于 2024-11-04 11:23:52 发布

原创最新推荐文章于 2024-11-04 11:23:52 发布 · 463 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文讨论了在Vue应用中，如何在APP对象的项目列表循环中正确处理`refreshTask4Project`函数，特别是在项目被点击时，如何使用Vue的`$set`方法实现数据更新以驱动界面刷新。

在APP对象里面：

const config1={
    el: '#app1',
    data: {
        projectList:[
            name:"",
            tasks:[]
        ],
    }，
    refreshTask4Project(project){
        axios.post(url).then(function (res) {      
            project.tasks = res.data;   //方式1：直接赋值
            that.$set(project,"tasks",res.data);   //方式2：用Vue的赋值函数
        }
    }
}

project是APP对象projectList:[]的一个属性，refreshTask4Project() 是APP对象的一个函数,用来在project被点击后，对其task列表进行懒加载显示。

界面中对projectList进行了循环，输出一组卡片，每个卡片也对其下属的tasks列表进行了输出

<el-card v-for="(project, projectidx) in projectList">
    <div slot="header"  @click="refreshTask4Project(project)">
        {{project.name}}
    </div>
    <div class='tasklist'>
        <div v-for="(task,taskidx) in project.tasks" class="project">
           {{task.name}}
        </div>
    </div>
</el-card>

那么，refreshTask4Project函数应该用方式1、2中的那种对tasks数组元素赋值？这要看函数是如何被调用的！

1、由于vue也不能检测到data对象初始化之后的动态变化, 因此直接如果在代码中调用refreshTask4Project(project)，则project.tasks=xxx 这样的赋值方式无法关联触发界面的变化，只能用vue自带的that.$set()方式赋值才行

2、但是像@click这样的，在projectList循环本身中来得到的元素project，就可以直接用project.tasks=xxx的方式赋值，也能触发界面变化。