在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的方式赋值,也能触发界面变化。