组件的关系
实际效果
点击 -> 未完成 会进行筛选
// 菜单回调
handleSelect(index) {
switch (index) {
case '未完成':
this.typeData.statuses = ['undo', 'doing', 'to_confirm'];
this.$store.commit('filterTasks', '未完成');
break;
case '今日':
this.$store.commit('filterTasks', '当天任务');
break;
case '本周':
this.$store.commit('filterTasks', '本周任务');
break;
case '我负责的':
this.$store.commit('filterTasks', '我负责的');
break;
case '我参与的':
this.$store.commit('filterTasks', '我参与的');
break;
default:
}
},
点击右侧的-> ~~~~当天任务也会进行筛选
// 通过vuex 传值 点击获取到具体某一个值,存储到vuex里
filterTasks(val) {
this.$store.commit('filterTasks', val);
},
以上是传值的代码
// 在列表页监听 filterTasks 如果有变化就调 this.taskList()传值 获取到筛选后的数据
watch: {
filterTasksVal(newVal) {
if (newVal === '全部') {
this.taskList();
} else if (newVal === '当天任务') {
// 1. 获取当天时间
const defaultDate = this.timeConversion(this.date.defaultDate);
const startTime = `${defaultDate} 00:00:00`;
const endTime = `${defaultDate} 23:59:59`;
this.typeData.createTime = [startTime, endTime];
this.taskList();
} else if (newVal === '我负责的') {
// 4. 获取当前用户名的 用户id
this.typeData.leadUser = this.userId;
this.typeData.userValue = [];
this.typeData.createTime = '';
this.taskList();
} else if (newVal === '未完成') {
this.typeData.leadUser = '';
this.typeData.createTime = '';
this.taskList();
}
}
现在有一个问题是 使用这种方法会触发两次watch
点击右侧的菜单栏进行筛选,会触发一次接口,
在 -> 点击未完成,就会触发两次watch
想不明白这种情况下为什么会触发两次watch
求大佬指导 或者有其他的方法传值也可以
谢谢
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…