Vuetify 如何模糊、聚焦点击的筹码？

Question

我有 Vuetify 与切换筹码有关的问题。

当我点击一个标签时，它会被选中，这很棒。当我点击 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

Answer 1

您可以添加自定义 css

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

勾选demo here

Vuetify 如何模糊、聚焦点击的筹码？

Vuetify How to blur, focus out clicked chips?

javascript

toggle

vue.js

vuetify.js