Vue JS：如何在子组件中去除字段重复数据？

直接在子组件中使用计算属性处理颜色去重即可，既不会影响父组件的原始数据，也能自动响应数据变化。

子组件修改代码 #

1. 移除data中对color的赋值，改用计算属性处理去重逻辑
2. 模板中渲染计算属性的结果

<template>
  <div v-if="uniqueColor">
    <strong>Color:</strong> {{ uniqueColor }}
  </div>
</template>

<script>
export default {
  props: ['result'], // 确保已声明接收result props
  computed: {
    uniqueColor() {
      if (!this.result?.color) return '';
      
      // 1. 分割颜色字符串为数组，去除每个颜色前后的空格
      const colorList = this.result.color.split(',').map(item => item.trim());
      
      // 2. 去重（保留原始大小写）
      const uniqueColors = [...new Set(colorList)];
      
      // 3. 拼接回格式化字符串
      return uniqueColors.join(', ');
    }
  }
}
</script>

处理大小写敏感的情况（可选） #

如果需要忽略大小写去重（比如Blue和blue视为同一种颜色），可以调整计算属性的逻辑：

computed: {
  uniqueColor() {
    if (!this.result?.color) return '';
    
    const colorList = this.result.color.split(',').map(item => item.trim());
    const seen = {};
    
    const uniqueColors = colorList.filter(color => {
      const lowerColor = color.toLowerCase();
      if (!seen[lowerColor]) {
        seen[lowerColor] = true;
        return true;
      }
      return false;
    });
    
    return uniqueColors.join(', ');
  }
}

关于mutation的说明 #

mutation是Vuex中用于修改全局状态的工具，你的需求只是对组件接收的数据做显示层转换，不需要修改原始数据或全局状态，完全不需要使用mutation，计算属性是更合适的选择。

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