Vue.js单字段去重正常，多字段去重失效并报错求助

问题根源 #

1. 字段访问路径错误：组件props接收的是result对象，但代码中直接使用this.Data，实际Data是result的内部属性，导致this.Data为undefined，调用split时触发报错
2. 缺失空值校验：部分数据的字段可能为null/undefined或空字符串，直接调用split会抛出类型错误
3. 未处理大小写统一：类似weekly和Weekly会被识别为不同值，不符合需求
4. 去重逻辑冗余：使用indexOf遍历去重效率偏低

解决方案 #

1. 修正字段访问路径 #

将代码中所有this.Data替换为this.result.Data，确保正确访问props传入的数据。

2. 封装通用处理函数 #

创建一个通用函数，一次性处理空值校验、大小写统一和去重逻辑，避免重复代码：

processField(fieldValue) {
  // 空值处理：字段不存在/为null/空字符串时直接返回空
  if (!fieldValue) return '';
  // 分割字符串→转小写→去空格→过滤空项→去重→拼接
  return [...new Set(
    fieldValue.split(',')
      .map(item => item.trim().toLowerCase())
      .filter(item => item)
  )].join(', ');
}

3. 重构组件逻辑 #

更新组件的data、methods和生命周期钩子：

<script>
export default {
  props: {
    result: Object,
  },
  data() {
    return {
      location: '',
      attendance: ''
    };
  },
  methods: {
    processField(fieldValue) {
      if (!fieldValue) return '';
      return [...new Set(
        fieldValue.split(',')
          .map(item => item.trim().toLowerCase())
          .filter(item => item)
      )].join(', ');
    },
    formatData() {
      // 用可选链避免result为undefined的情况
      const data = this.result?.Data || {};
      this.attendance = this.processField(data.attendance);
      this.location = this.processField(data.location);
    }
  },
  mounted() {
    this.formatData();
  }
};
</script>

4. 模板保持原有逻辑 #

模板无需大幅修改，继续通过v-if判断处理后的字段是否为空：

<div v-if="location">
  <strong>Location:</strong>
  {{ location }}
</div>    
<div v-if="attendance">
  <strong>Attendance:</strong>
  {{ attendance }}
</div>

关键优化点说明 #

• 可选链?.：this.result?.Data避免当result未传入或为undefined时触发报错
• 大小写统一：toLowerCase()将所有值转为小写，确保不同大小写的同内容值被识别为同一项
• 高效去重：利用Set自动去重的特性，配合扩展运算符转为数组，比indexOf遍历效率更高
• 空值过滤：trim()去除字符串首尾空格，filter(item => item)过滤分割后产生的空字符串项

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