vue3/components/AssignmentList.js

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