Vue.js 如何更改单击v-autocomplete选项项的行为

场景

单击某个选项时，v-autocomplete（带有多个道具）会激活其各自的复选框，并保持菜单打开状态，允许您继续选择其他项目，直到单击菜单外

目标

我想更改的是，当我只在复选框中单击时，本机行为将保持，但当在行上单击时，菜单将关闭，并使用所选项的值触发函数

我认为有必要使用插槽，但我真的不知道如何使用它，或者这是否是获得这种新行为的最佳方式

注意

---

垂直线仅用于概念演示，不必将此线包含在组件中。

如您所说，您可以使用插槽来完成。其想法是覆盖项目显示，以删除下方可单击的

v-list-item

。缺点是必须重新实现值选择

您需要一个复选框和两个方法：

isSelected

和

toggleItem

模板部分：

{{item}}

脚本部分：

数据：（）=>({
商品：['foo'，'bar'，'fizz'，'buzz']，
值：['foo'，'bar']，
}),
方法：{
当选（项目）{
返回此.values.includes（项）；
},
切换项目（项目）{
if（本数值包括（项目））{
this.values=this.values.filter（v=>v！==item）；
}否则{
此.values.push（项目）；
}
}
}

---

请看一下这个。

谢谢！！！你节省了几个小时的研究和尝试。现在只选择项目并关闭菜单的部分很简单。用你的方式分离复选框的那部分，真的很好。谢谢