design-patterns-nuxt/components/comment/list.vue

<template>
  <ul>
    <li v-for="comment in store.orderedComment(props.filmId)" class="m-6">
      <p class="bg-white p-4 mb-4 rounded-lg">
        {{ comment.message }}
      </p>
      <p>
        <UiPerson class="h-10 inline-block" /> {{ comment.username }} -
        {{ useDateFormat(comment.added, 'D MMM YYYY') }}
        {{ comment.score }}%
      </p>
    </li>
  </ul>
  <div class="mt-24"></div>
</template>
<script setup>
import { useDateFormat } from '@vueuse/core'

const props = defineProps(['filmId'])
const store = useCommentStore()
</script>