Vue-我如何控制v-自动完成芯片的行为?



我有20-25个名字来自API,我需要在一个下拉框(需求)中显示它们。我在这里使用Vue v-autocomplete在字段上显示选定的名称。我使用了自定义项目Select All,用户可以在下拉列表中选择所有名称,但是当用户单击select all时,我还需要做的是,我不想在自动完成字段中显示所有名称,包括select all Chip。只有单独选中而没有全选的项目才会显示为芯片。

这是我的代码沙箱我已经尝试到目前为止。我是Vue js的新手,所以我希望能得到一些关于控制v-autocomplete芯片的想法。

v-autocomplete沙箱

不包括"Select All"在名称数组中,您可以使用前置项插槽来包含一个单独的Select All复选框。

如果你需要区分通过单独点击选择的名字和通过Select All复选框选择的名字,你可能需要在名称数组中添加一个新属性来跟踪这一点,比如一个布尔值,如果选择一种方式为真,而另一种方式为假。

你还需要一个像插槽一样的选择来定制你的芯片的显示,你可以使用v-if根据新的布尔属性有条件地渲染芯片。

我相信这个codesandbox和你想要的非常接近

最新更新