vue 將數組中利用indexOf去重相同名，將值合並一排的方法

<template>
  <div>
    <div v-for="(value,key) in userClass">
      <span>{{ key}}</span>
      <span style="color: red">*</span>
      <span v-for="item in value">{{ item.phone}};</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "indexOfDemo",
  data() {
    return {
      userList: [
        {name: '張三', phone: '13811111111'},
        {name: '張三', phone: '13822222222'},
        {name: '張三', phone: '13833333333'},
        {name: '李四', phone: '13844444444'},
        {name: '李四', phone: '13855555555'},
        {name: '王五', phone: '13866666666'},
        {name: '王五', phone: '13877777777'},
        {name: '王五', phone: '13888888888'}
      ],
    }
  },
  created() {

  },
  computed: {
    userClass() {
      let typeList = []; //定義空數組，用於裝載去重之后的數組，
      let userClass = {}; //定義空對象，用於數組轉換成對象
      if (this.userList) { //如果有值
        this.userList.forEach(item => {
          //可以用indexOf()數組去重 如果檢索的結果匹配到,則返回 1. 如果檢索的結果沒有匹配值,則返回 -1.
          if (typeList.indexOf(item.name) === -1) {
            typeList.push(item.name);
            userClass[item.name] = [item];
          }else {
            userClass[item.name].push(item);
          }
        })
      }
      console.log(userClass)
      return userClass;
    }
  }
}
</script>

<style scoped>

</style>

結果：

張三*13811111111;13822222222;13833333333;

李四*13844444444;13855555555;

王五*13866666666;13877777777;13888888888;