vue2中使用计算属性

Question

在vue2中，使用计算属性，将下面数据

   "task_dimension_score": {
                    "prompt": null,
                    "dimensions": [
                        {
                            "desc": "",
                            "name": "维度1",
                            "weight": 80,
                            "elements": [
                                {
                                    "score_value": 1,
                                    "evaluate_name": "等级1"
                                },
                                {
                                    "score_value": 2,
                                    "evaluate_name": "等级2"
                                },
                                {
                                    "score_value": 3,
                                    "evaluate_name": "等级3"
                                },
                                {
                                    "score_value": 4,
                                    "evaluate_name": "等级4"
                                },
 {
                                    "score_value": 4,
                                    "evaluate_name": "等级6"
                                },
                                {
                                    "score_value": 5,
                                    "evaluate_name": "等级5"
                                }
                            ]
                        },
                        {
                            "desc": "mock dimension",
                            "name": "流畅度",
                            "weight": 20,
                            "elements": [
                                {
                                    "score_value": 0,
                                    "evaluate_name": "满意"
                                },
                                {
                                    "score_value": 0,
                                    "evaluate_name": "一般"
                                },
                                {
                                    "score_value": 0,
                                    "evaluate_name": "不满意"
                                }
                            ]
                        }
                    ]
                }

改成如下形式，如果score_value属性的值一样，只留存一个

  "task_dimension_score": {
                    "prompt": null,
                    "dimensions": [
                        {
                            "desc": "",
                            "name": "维度1",
                            "weight": 80,
                            "elements": [
                                {
                                    "score_value": 1,
                                    "evaluate_name": "等级1"
                                },
                                {
                                    "score_value": 2,
                                    "evaluate_name": "等级2"
                                },
                                {
                                    "score_value": 3,
                                    "evaluate_name": "等级3"
                                },
                                {
                                    "score_value": 4,
                                    "evaluate_name": "等级4"
                                },
                                {
                                    "score_value": 5,
                                    "evaluate_name": "等级5"
                                }
                            ]
                        },
                        {
                            "desc": "mock dimension",
                            "name": "流畅度",
                            "weight": 20,
                            "elements": [
                                {
                                    "score_value": 0,
                                    "evaluate_name": "满意"
                                },

                            ]
                        }
                    ]
                }

Answer 1

引自免费微信小程序：皆我百晓生

要在Vue2中使用计算属性来处理这个问题，你可以创建一个新的计算属性，这个属性基于原始task_dimension_score数据进行处理，去除具有相同score_value的重复条目。这里是如何实现它的步骤：

步骤 1: 定义计算属性

在Vue组件中，你需要定义一个名为processedTaskDimensionScore的计算属性。这个属性将会遍历原始的task_dimension_score.dimensions数组，并对每个elements数组进行处理，去除重复的score_value对象。

computed: {
  processedTaskDimensionScore() {
    // 使用map方法处理每一个dimension
    return {
      prompt: this.task_dimension_score.prompt,
      dimensions: this.task_dimension_score.dimensions.map(dimension => ({
        ...dimension, // 复制当前dimension对象
        elements: this.removeDuplicateScores(dimension.elements)
      }))
    };
  }
}

步骤 2: 实现去重函数

接下来，定义一个辅助函数removeDuplicateScores，它接收一个元素数组并返回一个新的数组，其中相同score_value的元素只保留一个。

methods: {
  removeDuplicateScores(elements) {
    const uniqueElementsMap = new Map();
    
    elements.forEach(element => {
      if (!uniqueElementsMap.has(element.score_value)) {
        uniqueElementsMap.set(element.score_value, element);
      }
    });

    // 将Map转换回数组
    return Array.from(uniqueElementsMap.values());
  }
}

步骤 3: 在模板中使用处理后的数据

最后，在Vue组件的模板部分，使用这个新的processedTaskDimensionScore计算属性来展示处理后的数据，而不是直接使用原始数据。

<div v-for="dimension in processedTaskDimensionScore.dimensions" :key="dimension.name">
  <h3>{{ dimension.name }}</h3>
  <ul>
    <li v-for="element in dimension.elements" :key="element.evaluate_name">
      {{ element.evaluate_name }} - {{ element.score_value }}
    </li>
  </ul>
</div>

这样，每次原始task_dimension_score数据变化时，计算属性processedTaskDimensionScore都会自动更新，提供去重后的结果供界面显示。注意，这里我们使用了ES6的Map数据结构来方便地去重，同时保持元素的唯一性。