Vue 忽略数据重复
Vue ignore data repetition
我是 Vue 的新手,正在尝试从我的数组对象中删除数据重复。
VIEW
<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
上的代码
创建一个计算 属性 来对您的数据进行分组。例如
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>
你可以试试:
new Vue({
el: "#app",
data: {
todos: [
{ text: "Javascript", time: "7:00 PM" },
{ text: "Java", time: "8: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: "Python", time: "7:00 PM" },
{ text: "MySQL", time: "8:00 PM" },
],
resolvedTodos: {}
},
mounted() {
this.resolvedTodos = this.todos.reduce((acc, item) => {
acc[item.time] =
!Object.keys(acc).find(a => a === item.time)
? [item.text]
: [...acc[item.time], item.text]
return acc
}, {})
},
methods: {
toggle: function (todo) {
todo.done = !todo.done;
},
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<div id="app">
<h2>Programming Classes Time</h2>
<div v-for="(langs, time in resolvedTodos">
{{ time }}
<div v-for="lang in langs">
{{ lang }}
</div>
<br />
</div>
</div>
我是 Vue 的新手,正在尝试从我的数组对象中删除数据重复。
VIEW
<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
创建一个计算 属性 来对您的数据进行分组。例如
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>
你可以试试:
new Vue({
el: "#app",
data: {
todos: [
{ text: "Javascript", time: "7:00 PM" },
{ text: "Java", time: "8: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: "Python", time: "7:00 PM" },
{ text: "MySQL", time: "8:00 PM" },
],
resolvedTodos: {}
},
mounted() {
this.resolvedTodos = this.todos.reduce((acc, item) => {
acc[item.time] =
!Object.keys(acc).find(a => a === item.time)
? [item.text]
: [...acc[item.time], item.text]
return acc
}, {})
},
methods: {
toggle: function (todo) {
todo.done = !todo.done;
},
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<div id="app">
<h2>Programming Classes Time</h2>
<div v-for="(langs, time in resolvedTodos">
{{ time }}
<div v-for="lang in langs">
{{ lang }}
</div>
<br />
</div>
</div>