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

<template>
  <ul>
    <li v-for="(comment, index) in store.orderedComment(props.filmId)" class="m-6">
      <p class="bg-white p-4 mb-4 rounded-lg"
        :class="{ 'rounded-bl-none': isEven(index), 'rounded-br-none': !isEven(index) }">
        {{ comment.message }}
      </p>
      <p :class="{ 'text-right': !isEven(index) }">
        <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()

const isEven = (index) => (index % 2 === 0)
</script>