Vue Удалить дубликаты из массива строк - PullRequest
Новая
       31

Vue Удалить дубликаты из массива строк

0 голосов
/ 28 мая 2020

Я использую [...new Map] на date, который должен передавать только уникальные значения date. Но console.log(uniqueObjects); не распечатывает уникальные значения даты. Есть что-то, что я делаю неправильно в [...new Map(date.map(item => [item.date, item])).values()];, который не передает уникальные значения даты. Есть ли способ напечатать уникальное значение даты , используя class='filter'?

SCRIPT 

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
    }
  }
})

VIEW 

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

Ответы [ 2 ]

0 голосов
/ 28 мая 2020

Вы хотели создать фильтр moment, но поместили его в свойство computed! вот почему ваш console.log не печатает.

Есть ли способ распечатать уникальное значение даты с помощью class = 'filter'?

вы путаете css с vueJs, class='filter' это используется только для стилизации, если вы хотите показать уникальные значения, вам необходимо отфильтровать массив todos в v-for="reservation in todos"

Пожалуйста, перечитайте этот раздел https://vuejs.org/v2/guide/filters.html и https://vuejs.org/v2/guide/list.html

0 голосов
/ 28 мая 2020

А теперь нормально работает? Если вы напишете 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>
...