smokeyfro

<template>
  <Layout>

    <h1>Group by Year via computed</h1>

    <ul>
      <li v-for="(items, year) in groupedByYear" :key="year">
        {{ year }}
        <ul>
          <li v-for="item in items" :key="item.id">

smokeyfro

<template>
  <Layout>
    <h1>Group by Category via computed</h1>
    <ul>
      <li v-for="(items, category) in groupedByCategory" :key="category">
        {{ category }}
        <ul>
          <li v-for="item in items" :key="item.id">
            {{ item.title }}
          </li>

smokeyfro

<template>
  <Layout>
    <h1>Group by Year via method</h1>
    <ul>
      <li v-for="(items, year) in groupBy($page.allBlogPost.edges, 'createdYear')" :key="year">
        {{ year }}
        <ul>
          <li v-for="item in items" :key="item.id">
            {{ item.title }}
          </li>

smokeyfro

<template>
    <header class="p-10">
        <div class="md:flex md:justify-between md:items-center">
            <a href="/" title="" class="block hover:opacity-60">
                <!-- <img :src="fileUrl(global.seo_image.id)" :alt="global.site_name" class="w-12" /> -->
            </a>
            <!-- <pre>{{global.navigation[0]}}</pre> -->
            <!-- <ul v-if>
                <li v-for="(item,index) in global.navigation" :key="index">
                    {{ item.label.value }}

smokeyfro

import { defineStore } from 'pinia';

export const useAssignmentsStore = defineStore('assignments', {
    state: () => ( {
      assignments: {},
    }),
    actions: {
      async fetchAssignments() {
        const user = useDirectusUser()
        const { getItems } = useDirectusItems()