javascript - vue删除表中重复的循环

Question

我有重复的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
        }
        ]
    };
  },

});

Answer 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>