Good day guys
I’d like to seek advise on accessing the 2nd element layer of my nested array to loop through a templated component making it a dynamic card through a year, btw I use laravel vue just incase you need to know
my desired template
----------------------------|
|Component |
|---------------------------|
|Title header |
|---------------------------|
|Event Name |date |remarks |
-----------------------------
I reffered to this as my guide for the array Nested arrays of objects and v-for
then afterwards i was able to rendered or display the first layer which is the title of my component but the 2nd layer which the data seems to return an empty, but when i try to dump the whole array it returns me the right data
Sample Dump
[
{
"event_name": "New Year",
"month": "01",
"day": 1,
"status": "enabled",
"date": "2024-01-1"
}
]
here’s my sample codes
Structure of the code/component
title-> first loop to render the 1st element of array (title) using v-for
data-> 2nd render the rest of the data loop using v-for inside the first loop
script
<script setup>
import MainContent from '../../Components/MainContent.vue'
import { reactive } from 'vue'
const props = defineProps({
title: String,
january:Array,
february:Array,
december:Array,
department_category:Array
})
const months = [
{
name:"January",
data:props.january
},
{
name:"February",
data:props.february
}
]
</script>
Vue Component
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4 mb-4">
<!-- Loop through Whole Year -->
<div v-for="value in months" :key="value.id" class="bg-white rounded-md border border-gray-100 p-6 shadow-md shadow-black/5">
<div class="flex justify-between mb-4 items-start">
<div class="font-medium">{{ value.name}}</div>
<div class="dropdown">
<button type="button" class="dropdown-toggle text-gray-400 hover:text-gray-600"><i class="ri-more-fill"></i></button>
<ul class="dropdown-menu shadow-md shadow-black/5 z-30 hidden py-1.5 rounded-md bg-white border border-gray-100 w-full max-w-[140px]">
<li>
<a href="#" class="flex items-center text-[13px] py-1.5 px-4 text-gray-600 hover:text-blue-500 hover:bg-gray-50">Profile</a>
</li>
<li>
<a href="#" class="flex items-center text-[13px] py-1.5 px-4 text-gray-600 hover:text-blue-500 hover:bg-gray-50">Settings</a>
</li>
<li>
<a href="#" class="flex items-center text-[13px] py-1.5 px-4 text-gray-600 hover:text-blue-500 hover:bg-gray-50">Logout</a>
</li>
</ul>
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full min-w-[540px]">
<thead>
<tr>
<th class="text-[12px] uppercase tracking-wide font-medium text-gray-400 py-2 px-4 bg-gray-50 text-left rounded-tl-md rounded-bl-md">Event Name</th>
<th class="text-[12px] uppercase tracking-wide font-medium text-gray-400 py-2 px-4 bg-gray-50 text-left">Date</th>
<th class="text-[12px] uppercase tracking-wide font-medium text-gray-400 py-2 px-4 bg-gray-50 text-left">Remarks</th>
</tr>
</thead>
<tbody>
<tr v-for="event in [value.data]" :key="event.id">
<td class="py-2 px-4 border-b border-b-gray-50">
<div class="flex items-center">
<img src="https://placehold.co/32x32" alt="" class="w-8 h-8 rounded object-cover block">
<a href="#" class="text-gray-600 text-sm font-medium hover:text-blue-500 ml-2 truncate">{{ event.event_name}}</a>
</div>
</td>
<td class="py-2 px-4 border-b border-b-gray-50">
<span class="text-[13px] font-medium text-gray-400">{{ event.date }}</span>
</td>
<td class="py-2 px-4 border-b border-b-gray-50">
<span class="text-[13px] font-medium text-gray-400">
<button class="ml-2 btn btn-xs btn-accent">Update</button>
<button class="ml-2 btn btn-xs btn-error">Remove</button>
</span>
</td>
</tr>
</tbody>
</table>
</div>
My Current Output
----------------------------|
|Component |
|---------------------------|
|January |
|---------------------------|
|//empty |//empty |
-----------------------------
----------------------------|
|Component |
|---------------------------|
|February |
|---------------------------|
|//empty |//empty |
-----------------------------