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