Vue从字符串数组中删除重复项答案

【问题标题】：Vue Remove duplicates from an array of stringVue从字符串数组中删除重复项
【发布时间】：2020-05-28 18:56:31
【问题描述】：

我在date 上使用[...new Map]，它应该只传递date 的唯一值。但是console.log(uniqueObjects); 不会打印出唯一的日期值。我在[...new Map(date.map(item => [item.date, item])).values()]; 做错了一些事情，它没有传递唯一的日期值。有没有办法使用class='filter'打印唯一日期值？

脚本

new Vue({
  el: "#app",
  data: {
    todos: [
      { id:"1", date:"2020-05-28T18:30:00.000Z", peopleName: "David" },
      { id:"2", date:"2020-05-28T18:30:00.000Z", peopleName: "Jack" },
      { id:"3", date:"2020-05-28T20:00:00.000Z", peopleName: "John" },
      { id:"4", date:"2020-05-28T20:00:00.000Z", peopleName: "Thomas" },
      { id:"5", date:"2020-05-28T20:00:00.000Z", peopleName: "Will" },
      { id:"6", date:"2020-05-28T21:30:00.000Z", peopleName: "Hary" },
    ]
  },
  computed:{
    filter: {
    moment: function (date) {
        console.log("its not printing");

        /** return moment(date).format('h:mm A') **/

        console.log(date);

        const uniqueObjects = [...new Map(date.map(item => [item.date, item])).values()];

       /** i am using new Map to remove the same value for date but it's not working **/

       console.log(uniqueObjects);
    }
  }
 },
  methods: {
    toggle: function(todo){
        todo.done = !todo.done
    }
  }
})

查看

<div id="app">
  <div v-for="reservation in todos" v-bind:key="reservation.id">
     <p class="filter">{{ reservation.date | moment }}</p>
     <p>{{reservation.peopleName}}</p>
  </div>
</div>

下面是jsfidddle上的代码链接

https://jsfiddle.net/ujjumaki/ro5p4kxt/21/

【问题讨论】：

标签： vue.js momentjs

【解决方案1】：

现在可以正常工作了吗？如果你写 v-for="reservation in filter" 显示过滤值，如果 v-for="reservation in todos" - 所有值。

new Vue({
  el: "#app",
  data: {
    todos: [
      { id:"1", date:"2020-05-28T18:30:00.000Z", peopleName: "David" },
      { id:"2", date:"2020-05-28T18:30:00.000Z", peopleName: "Jack" },
      { id:"3", date:"2020-05-28T20:00:00.000Z", peopleName: "John" },
      { id:"4", date:"2020-05-28T20:00:00.000Z", peopleName: "Thomas" },
      { id:"5", date:"2020-05-28T20:00:00.000Z", peopleName: "Will" },
      { id:"6", date:"2020-05-28T21:30:00.000Z", peopleName: "Hary" },
    ]
  },
  computed:{
  	filter()  {
      return [...new Map(this.todos.map(item => [item.date, item])).values()];
  }
 }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="reservation in filter" v-bind:key="reservation.id">
     <p>{{reservation.date}}</p>
     <p>{{reservation.peopleName}}</p>
  </div>
</div>

【讨论】：

那个计算过滤器，太棒了！ +1

【解决方案2】：

您想创建一个moment 过滤器，但您将它放在computed 属性中！这就是您的console.log 没有打印的原因。

有没有办法使用 class='filter' 打印唯一的日期值？

您将 css 与 vueJs 混淆了，class='filter' 仅用于样式，如果您想显示唯一值，则必须在 v-for="reservation in todos" 中过滤您的 todos 数组

请重新阅读本节https://vuejs.org/v2/guide/filters.html 和https://vuejs.org/v2/guide/list.html

【讨论】：