﻿<template>

  <div v-for="(message, index) in messages" :key="index">
    <Message :message="message"></Message>
  </div>

</template>

<script setup>

import Message from "@/views/messages/Message.vue";
// import posts from "@/views/posts/posts.json";

import {useClient} from '@/plugins/api.js';
import {defineProps, onBeforeMount, ref} from 'vue';

const props = defineProps({
  contentId: {
    type: String,
    required: true
  }
});

const client = useClient();
const messages = ref();

onBeforeMount(async () => {
  try {
    const response = await client.get(`/api/messages/${props.contentId}`)
    messages.value = response.data
  } catch (error) {
    console.error("Failed to fetch posts", error);
  }
})

</script>