vue.js - Vue忽略数据重复

Question

我是Vue的新手，正在尝试从我的数组对象中删除数据重复。

查看

<div id="app">
  <h2>Programming Classes Time</h2>
  <div v-for="todo in todos">
    <p>{{todo.time}}</p>

/** Is there a way to display 7:00 PM only once and under 7:00 PM display Javascript, JQuery and PHP **/
/** display 8:00 PM only once and under it there should be CSS, HTML and MySQL **/

    <p>{{todo.text}}</p>
    <br/>
  </div>
</div>

脚本

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Javascript", time: "7:00 PM" },
      { text: "JQuery", time: "7:00 PM" },
      { text: "PHP", time: "7:00 PM" },
      { text: "CSS", time: "8:00 PM" },
      { text: "HTML", time: "8:00 PM" },
      { text: "MySQL", time: "8:00 PM" }
    ]
  },
  methods: {
    toggle: function(todo){
        todo.done = !todo.done
    }
  }
})

是否可以只显示一次7:00 PM，并在下面显示Javascript，JQuery和PHP，如下图所示？



下面是我在 jsfiddle上的代码

https://jsfiddle.net/ujjumaki/hu9ytvwn/14/

Answer 1

创建一个计算属性以对数据进行分组。例如

computed: {
  todosByTime () {
    const grouped = this.todos.reduce((map, { text, time }) => {
      let group = map.get(time) || map.set(time, []).get(time)
      group.push(text)
      return map
    }, new Map())

    return Array.from(grouped, ([ time, texts ]) => ({ time, texts }))
  }
}

现在您可以在模板中使用它

<dl>
  <template v-for="todo in todosByTime" :key="todo.time">
    <dt>{{ todo.time }}</dt>
    <dd v-for="text in todo.texts">{{ text }}</dd>
  </template>
</dl>