如何在Vue中实现基于Chips的图片标签筛选功能？

实现思路与代码： #

1. 自动提取处理标签：通过计算属性遍历images数组里的所有标签，用Set去重后按字母排序，渲染成可点击的<li>标签
2. 标签选中与图片筛选：维护一个数组存选中的标签，点击标签切换选中状态；再用计算属性根据选中标签过滤图片，无选中标签时显示全部

完整HTML代码：

<div class="container">
  <div class="tags">
    <li 
      v-for="tag in sortedUniqueTags" 
      :key="tag"
      :class="{ active: selectedTags.includes(tag) }"
      @click="toggleTag(tag)"
    >
      {{ tag }}
    </li>
  </div>
  <div class="images">
    <img 
      v-for="image in filteredImages" 
      :key="image.url"
      :src="image.url"
      :alt="image.name"
    >
  </div>
</div>

完整Vue脚本代码：

data: function () {
  return {
    images: [
      {
        tags: ["art"],
        url: "url of image",
        name: "my image name",
      },
      {
        tags: ["chipmunk", "art"],
        url: "url of image",
        name: "my image name",
      },
      {
        tags: ["ship"],
        url: "url of image",
        name: "my image name",
      },
      {
        tags: ["art", "ship"],
        url: "url of image",
        name: "my image name",
      },
    ],
    selectedTags: [] // 存储选中的标签
  };
},
computed: {
  // 生成去重并按字母排序的标签列表
  sortedUniqueTags() {
    // 把所有图片的标签合并成一维数组
    const allTags = this.images.flatMap(img => img.tags);
    // 去重后转数组并排序
    return [...new Set(allTags)].sort();
  },
  // 筛选符合选中标签的图片
  filteredImages() {
    // 没有选中标签时返回全部图片
    if (this.selectedTags.length === 0) return this.images;
    // 过滤出包含至少一个选中标签的图片
    return this.images.filter(img => {
      return this.selectedTags.some(tag => img.tags.includes(tag));
    });
  }
},
methods: {
  // 切换标签的选中状态
  toggleTag(tag) {
    if (this.selectedTags.includes(tag)) {
      // 已选中则移除
      this.selectedTags = this.selectedTags.filter(t => t !== tag);
    } else {
      // 未选中则添加
      this.selectedTags.push(tag);
    }
  }
}

额外提示： #

可以给.active类写CSS样式，比如背景色、文字颜色变化，让选中状态更明显；如果需要“必须包含所有选中标签才显示图片”，把筛选逻辑里的some改成every即可。

内容的提问来源于stack exchange，提问作者TheCzechTayen