Vue中如何动态提取文档标签实现下拉筛选功能？

一、动态提取非空且去重的标签 #

用Vue的计算属性（computed）处理，能自动响应documents数组的变化，实时更新标签列表：

<script setup>
import { ref, computed } from 'vue'

// 示例文档数组，tags支持逗号分隔字符串或数组格式，部分为空
const documents = ref([
  { id: 1, title: '文档1', tags: 'Vue,前端' },
  { id: 2, title: '文档2', tags: 'JavaScript' },
  { id: 3, title: '文档3', tags: '' },
  { id: 4, title: '文档4', tags: ['Vue', '组件'] }
])
const selectedTag = ref('全部')

// 生成可用标签列表（非空、去重）
const availableTags = computed(() => {
  let tagCollection = []
  documents.value.forEach(doc => {
    // 跳过空标签的文档
    if (!doc.tags || (typeof doc.tags === 'string' && doc.tags.trim() === '')) return
    
    // 兼容字符串和数组两种标签格式
    const processedTags = typeof doc.tags === 'string' 
      ? doc.tags.split(',').map(tag => tag.trim()) 
      : doc.tags
    
    // 收集所有有效标签
    tagCollection.push(...processedTags)
  })
  // 去重后返回，可选排序
  return [...new Set(tagCollection)].sort()
})
</script>

二、渲染标签下拉选项 #

直接遍历计算出的availableTags，搭配“全部”选项：

<template>
  <div>
    <select v-model="selectedTag">
      <option value="全部">全部标签</option>
      <option v-for="tag in availableTags" :key="tag" :value="tag">
        {{ tag }}
      </option>
    </select>

    <!-- 展示筛选后的文档列表 -->
    <div v-for="doc in filteredDocuments" :key="doc.id">
      {{ doc.title }} - {{ doc.tags }}
    </div>
  </div>
</template>

三、实现标签筛选逻辑 #

继续用计算属性处理筛选，根据选中的标签过滤文档：

<script setup>
// ... 保留之前的代码

const filteredDocuments = computed(() => {
  // 选中“全部”时返回所有文档
  if (selectedTag.value === '全部') return documents.value
  
  return documents.value.filter(doc => {
    // 空标签的文档直接排除
    if (!doc.tags || (typeof doc.tags === 'string' && doc.tags.trim() === '')) return false
    
    const docTags = typeof doc.tags === 'string' 
      ? doc.tags.split(',').map(tag => tag.trim()) 
      : doc.tags
    
    // 判断文档是否包含选中的标签
    return docTags.includes(selectedTag.value)
  })
})
</script>

关键说明 #

• 兼容了tags为逗号分隔字符串和数组两种常见格式，解决了直接遍历可能出现的格式不统一问题
• 自动跳过空标签的文档，避免生成无效下拉选项
• 用Set去重，防止下拉列表出现重复标签
• 计算属性会自动监听documents和selectedTag的变化，实现实时更新筛选结果

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