如何使禁用的 v-select 中的芯片可点击？答案

【问题标题】：How can chips inside a disabled v-select be made clickable?如何使禁用的 v-select 中的芯片可点击？
【发布时间】：2019-06-17 18:17:58
【问题描述】：

我有一个v-select，它在内部用v-chips 表示所选项目。当用户不编辑选择时，我希望芯片用作按钮，但是当用户不编辑选择时，v-select 被禁用。由于v-select 被禁用，我绑定到v-chip 的任何@click 事件都不起作用，因为禁用行为级联到v-chips。由于需要禁用 v-select 以防止下拉行为，我如何在 v-chip 元素上启用我的 @click 事件。

请参阅此 CodePen 了解我的粗略设置：https://codepen.io/anon/pen/orLxMz

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

看起来v-select的disable属性添加了一个

pointer-events: none;

样式给它的所有后代。这就是阻止@click 事件触发的原因。

要重新启用v-chips 进行点击，请添加样式

pointer-events: all;

到 v-chip 声明。

查看这个工作的 CodePen：https://codepen.io/anon/pen/QXEKLN

【讨论】：