vue的computed和watch联合使用
问题说明:这里使用计算属性获取thirdAllItems,这个得到的是所有的三级项指标。thirdCurrentItems是三级项的当前活动项,用于高亮。本来我还是想使用计算属性,如下代码去设置thirdCurrentItems,这个确实可以实现点击一级指标和二级指标的时候高亮联动得到的三级指标的第一项。但是我这里三级之后还有第四级,再单独点击三级指标的时候,计算属性thirdCurrentIt.
·
问题
说明:这里使用计算属性获取thirdAllItems
,这个得到的是所有的三级项指标。thirdCurrentItems
是三级项的当前活动项,用于高亮。本来我还是想使用计算属性,如下代码去设置thirdCurrentItems
,这个确实可以实现点击一级指标和二级指标的时候高亮联动得到的三级指标的第一项。但是我这里三级之后还有第四级,再单独点击三级指标的时候,计算属性thirdCurrentItems
的set
函数就不是那么好写了
thirdCurrentItems: {
get: function() {
return this.thirdAllItems[0].ItemId
}
}
解决
thirdCurrentItems
不写在计算属性了,使用watch
监控thirdAllItems
,以实现点击一二级的时候,高亮三级项的首项,在methods
中的thirdItemClick
函数设置this.thirdCurrentItems = id
methods: {
//点击三级标题
thirdItemClick(id) {
console.log(id)
this.thirdCurrentItems = id
}
},
computed: {
// 三级项目录所有的数据
thirdAllItems: function() {
let self = this
if (this.allData.Items) {
return this.allData.Items.filter(function(val) {
return val.ParentId == self.secondCurrentItems
})
} else {
return {}
}
}
// thirdCurrentItems: {
// get: function() {
// return this.thirdAllItems[0].ItemId
// }
// }
},
watch: {
thirdAllItems: function() {
this.thirdCurrentItems=this.thirdAllItems[0].ItemId
}
},
更多推荐
已为社区贡献31条内容
所有评论(0)