vue 删除表中的重复循环答案

【问题标题】：vue remove duplicate loops in tablevue 删除表中的重复循环
【发布时间】：2019-03-23 23:10:56
【问题描述】：

我有重复的json数据...如何根据id_cms_users去除重复数据并将数据显示到表格中

我尝试了https://codepen.io/roverv/pen/YQvdya 的方法，但只显示一列

<tr  v-for="coba in ayam ">
  <td>{{ coba.id_cms_users }}</td>
  <td>{{ coba.cms_users_name }}</td>
  <td>{{ coba.berminat }}</td>
</tr>

var app = new Vue({
  el: "#app",
  data: function () {
    return {
      ayam: [{
            id: 62,
            id_cms_users: 7,
            cms_users_name: "Imam Prasetyo",
            berminat: 1
        },
        {
            id: 61,
            id_cms_users: 7,
            cms_users_name: "Imam Prasetyo",
            berminat: 1
        },

        {
            id: 56,
            id_cms_users: 20,
            cms_users_name: "Nanda Rusfikri",
            berminat: 2
        }
        ]
    };
  },

});

【问题讨论】：

当有重复的id_cms_users值时，应该选择哪个对象，省略哪个对象？请显示您希望结果的外观

标签： javascript json vue.js filter

【解决方案1】：

将Array#filter 方法与计算属性一起使用：

var app = new Vue({
  el: "#app",
  data: function() {
    return {
      ayam: [{
          id: 62,
          id_cms_users: 7,
          cms_users_name: "Imam Prasetyo",
          berminat: 1
        },
        {
          id: 61,
          id_cms_users: 7,
          cms_users_name: "Imam Prasetyo",
          berminat: 1
        },

        {
          id: 56,
          id_cms_users: 20,
          cms_users_name: "Nanda Rusfikri",
          berminat: 2
        }
      ]
    };
  },

  computed: {
    uniqueAyam: function () {
      var existingIds = {};
      return this.ayam.filter(function (user) {
        if (existingIds[user.id_cms_users]) return false;
        return existingIds[user.id_cms_users] = true;
      })
    }
  }
});

body{background:linear-gradient(135deg,#42e695 0,#3bb2b8 100%);font-family:futura,helvetica;background-repeat:no-repeat;height:100vh;display:flex;justify-content:center;padding:2px}table{background:#FAFAFA;padding:20px;border-radius:5px;box-shadow:0 20px 50px -10px rgba(0,0,0,.2)}tr{padding:5px;box-shadow:0 1px 0 #d3d3d3;height:2rem}h1{color:#fff;text-shadow:0 2px 5px rgba(0,0,0,.2)}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

<div id="app">

  <h1>Users</h1>
  <table>
  
    <!-- Change `ayam` to `uniqueAyam` -->
    
    <tr v-for="coba in uniqueAyam">
      <td>{{ coba.id_cms_users }}</td>
      <td>{{ coba.cms_users_name }}</td>
      <td>{{ coba.berminat }}</td>
    </tr>
    
  </table>


</div>

【讨论】：

【解决方案2】：

使用 reduce 将项目添加到结果中，如果它还没有，否则只返回结果。

const data = [
  {
    id: 62,
    id_cms_users: 7,
    cms_users_name: 'Imam Prasetyo',
    berminat: 1
  },
  {
    id: 61,
    id_cms_users: 7,
    cms_users_name: 'Imam Prasetyo',
    berminat: 1
  },

  {
    id: 56,
    id_cms_users: 20,
    cms_users_name: 'Nanda Rusfikri',
    berminat: 2
  }
];

const uniqueUser = array =>
  array.reduce(
    (results, item) => (results.find(i => i.id_cms_users === item.id_cms_users) ? results : [...results, item]),
    []
  );

console.log(uniqueUser(data));

【讨论】：