42 行
959 B
JavaScript
42 行
959 B
JavaScript
import Assignment from "./Assignment.js";
|
|
import AssignmentTags from "./AssignmentTags.js";
|
|
|
|
export default {
|
|
components: { Assignment, AssignmentTags },
|
|
template: `
|
|
<section id="section-1" v-show="visibleAssignments.length">
|
|
<h2 class="font-bold mb-2">{{ title }} <span>({{ visibleAssignments.length }})</span> </h2>
|
|
|
|
<assignment-tags
|
|
:initTags="assignments.map(a => a.tag)"
|
|
:currentTag="currentTag"
|
|
@change="currentTag = $event"
|
|
/>
|
|
|
|
<ul class="mt-6">
|
|
<assignment v-for="assignment in visibleAssignments" :key="assignment.id" :assignment="assignment"/>
|
|
</ul>
|
|
</section>
|
|
`,
|
|
|
|
props: {
|
|
assignments: Array,
|
|
title: String,
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
currentTag: "all",
|
|
};
|
|
},
|
|
|
|
computed: {
|
|
visibleAssignments() {
|
|
if (this.currentTag === "all") {
|
|
return this.assignments;
|
|
}
|
|
return this.assignments.filter((a) => a.tag === this.currentTag);
|
|
},
|
|
},
|
|
};
|