Vue删除表中的重复循环

Question

原始

  

saya memiliki data json yang duplikat .. bagaimana删除数据duplikat berdasarkan id_cms_users dan menampilkan data tersebut ke table

     

saya coba cara https://codepen.io/roverv/pen/YQvdya塔皮hanya untuk satu colums untuk di tampilkan

翻译

我有重复的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>

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