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