vue.js–；带有快速过滤器的菜单树：可折叠且过滤器不'；我们不能一起工作 动机

我想创建一个带有搜索栏的菜单树来突出显示菜单项。我提出了以下实施方案：

const treeConfig=[
{
标签：“用户”，
儿童：[
{
标签：“用户组”
},
{
标签：“权限”
}
]
},
{
标签：“测试”，
儿童：[
{
标签：“单元测试”
},
{
标签：“视觉回归测试”
}
]
},
{
标签：“其他东西”
}
];
Vue.component（'树'{
模板：“#树”，
道具：['nodes']，
数据（）{
返回{
秀童：真的
};
},
方法：{
切换儿童（）{
this.showChildren=！this.showChildren；
}
}
});
const vm=新的Vue({
el:“#应用程序”，
数据：{
快速搜索：“”
},
计算：{
节点（）{
const self=这个；
函数getTree（节点）{
返回nodes.map（（node）=>{
node.label=node.label；
node.label=node.label.replace（新的RegExp（self.quicksearch，'gi'），'$&'）；
if（节点子节点）{
node.children=getTree（node.children）；
}
返回节点；
});
}
返回getTree（treeConfig）；
}
}
});



+
-


您应该看看这个：
当您的计算结果是通过更改quicksearch值新计算的时，它不会触发其他组件（在本例中为树项）的重建，因为它不会深入观察对象

这里的简单工作是整体影响新的数组映射结果


const treeConfig=[
{
标签：“用户”，
儿童：[
{
标签：“用户组”
},
{
标签：“权限”
}
]
},
{
标签：“测试”，
儿童：[
{
标签：“单元测试”
},
{
标签：“视觉回归测试”
}
]
},
{
标签：“其他东西”
}
];
Vue.component（'tree-item'{
模板：“#树项目”，
道具：['node']，
数据（）{
返回{
秀童：真的
};
},
方法：{
切换儿童（）{
this.showChildren=！this.showChildren；
}
},
观察：{
节点（n）{
console.log（n）
}
},
创建（）{
console.log（this.node）；
}
});
const vm=新的Vue({
el:“#应用程序”，
数据：{
快速搜索：''，
标题：“你好，过滤树！”，
节点：[]
},
方法：{
getNodes（）{
const self=这个；
函数getTree（节点）{
返回nodes.map（（node）=>{
node.label=node.label；
node.label=node.label.replace（新的RegExp（self.quicksearch，'gi'），'$&'）；
if（节点子节点）{
node.children=getTree（node.children）；
}
返回节点；
});
}
返回getTree（treeConfig）；
}
},
创建（）{
this.nodes=this.getNodes（）；
},
观察：{
快速搜索（q）{
this.nodes=this.getNodes（）；
}
}
});




+
-



阵列似乎有问题。只需将
：key=“node.label”
添加到模板中的
树项
标记中即可。
看起来很有希望。我看过医生了，但我可能不太明白。我将尝试在我的真实用例上测试您的更改。有趣！它不需要一个观察者和一个钩子。我来检查一下。再见：谢谢；-）奇怪。我认为这解决了问题，但它导致了另一个问题。过滤器现在有点怪。尝试在sss后搜索：不需要匹配项，但仍突出显示权限和可视化回归测试。使用@Ekushisu提供的解决方案，它可以按预期工作。我不会更改子组件上的任何道具，只会转换树配置。为了让代码更简单，这里有一个快速而肮脏的解决方案：将
：key=“node.label”
替换为
：key=“node.id”
，并添加
node.id=Guid（）
在正则表达式行之前<代码>Guid（）
一些基本的增量id生成器函数。抱歉这么快就做出判断：）。没问题；-）-我正在使用
Math.random（）.toString（36）.substring（2,15）
创建uid，是的，它似乎工作正常。但我认为它有一些性能成本。因此，目前我将使用公认的答案。