Vuetify 如何模糊，聚焦点击的芯片？答案

【问题标题】：Vuetify How to blur, focus out clicked chips?Vuetify 如何模糊，聚焦点击的芯片？
【发布时间】：2018-12-11 09:34:06
【问题描述】：

我有 Vuetify trouble 与切换芯片。

当我点击一个标签时，它会被选中，这很棒。当我点击 clear tags 时，它们都失去了 selected 属性，这也很棒。

问题在于，当我点击一个芯片时 -> 它会被选中并且当再次点击时它在所选标签中丢失所选属性 但 看起来会被选中，直到它失去焦点 =直到我点击其他地方。这不是我希望用户拥有的用户体验。

如何实现正确的切换？表示被点击的芯片在被点击时获得和失去被选择的属性。

有没有办法在我的 toggleTags 方法中聚焦或模糊 selectedTag？请指出正确的方向。

<v-chip v-for="categoryTag in tag.categoryTags"
        :key="categoryTag.id"
        label
        small
        outline
        color="info"
        :selected="isSelected(categoryTag)"
        @click="toggleTags(categoryTag)">
  {{categoryTag.name}}
</v-chip>

methods: {
toggleTags(clickedTag) {
  if (this.isSelected(clickedTag)) {
    this.selectedTags = this.selectedTags.filter(tag => tag !== clickedTag);
    return;
  }
  this.selectedTags.push(clickedTag);
},
clearTags() {
  this.selectedTags = [];
},

working pen

【问题讨论】：

标签： javascript vue.js toggle vuetify.js

【解决方案1】：

您可以添加自定义 css

.v-chip:focus:not(.v-chip--selected):after {
  background: none !important;
}

查看demo here

【讨论】：