Component vue3 can't initialaize array data on created

Question

I have a component that it has v-for to showing multiple repetition of data, I use vue3 with composition API, When I initialize table of data and log it, it shows the right value what I want, but the length it is 0 and it's not rendring on template, I don't know why !!

template :

<template>
  <base-page>
  <form @submit.prevent="submitForm">
    <base-header>
      <template #title>
        <nav class="py-2 rounded-md w-full">
          <ol class="list-reset flex">
            <li>
              <router-link
                to="/dashboard"
                class="text-blue-600 hover:text-blue-700"
                >Accueil</router-link
              >
            </li>
            <li><span class="text-gray-500 mx-2">/</span></li>

            <li class="text-gray-500">
              Ajouter une réservation pour {{ terrain.name }}
            </li>
          </ol>
        </nav>
      </template>
    </base-header>
    <div class="mt-4">
      <div class="flex text-center  grid grid-cols-5">
        {{sessionList}}
        <div v-for="(item, index) in sessionList" :key="index" class="rounded-lg ml-2 shadow-lg bg-white max-w-sm">
          <h5 class="text-gray-900  text-center font-medium m-2">Card title</h5>
          <a href="#!">
            <img class="rounded-t-lg m-auto w-16 h-16" src="/img/green-ball.png" alt=""/>
          </a>
          <div class="p-2">
            
            <p class="text-gray-700 text-base mb-4">
              Some quick example text to {{index}}
            </p>
            <button type="button" class=" inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">
              Réserver
            </button>
          </div>
        </div>
       
      </div>
    </div>
  </form>
  </base-page>
</template>

script :

<script setup>
import {ref,onMounted} from "vue"
import {mdiContentSavePlusOutline} from "@mdi/js"
import moment from "moment"
moment.locale('fr');
const terrain = ref({
  id: 1,
  name: "terrain 1",
  capacity: 11,
  duration: 1,
  price: 8,
  external: true,
  complexe: "Stade 1",
  formatted_created_at: "10/10/2022",
})

let date = new moment()
let datesList = []
let sessionList = []
let nextDate = date

  for (let index = 0; index < 15; index++) {
  datesList.push(nextDate.format('YYYY-MM-DD'))
  let tab  = []
  let hourDate = nextDate
  for (let i = 0; i < 4; i++) {
    let debut = moment(nextDate).add(i+1,'hours').format('HH:mm:ss')
    let fin = moment(nextDate).add(i+2,'hours').format('HH:mm:ss')
    tab.push({
      debut : debut,
      fin : fin,
      reserved : i % 2 == 0
    })
  }
  sessionList[datesList[index]] = tab
  nextDate = date.add(1,'days');
  
}
console.log(datesList)
console.log(sessionList)
</script>

log :

Edit

the sessionList variable it would have like this format :

Thomas · Accepted Answer · 2022-12-07 09:33:09Z

3

You define sessionList as an array, but you are adding items to it like an object. So the arrays length is still 0, but you added properties with the dates as you can see in the screenshot. This is also why nothing is rendered. I am not sure what you want to do with the date, but maybe just add it as another property of the tab object and then push this to the array:

tab.push({
    debut : debut,
    fin : fin,
    reserved : i % 2 == 0,
    date: datesList[index]
});
sessionList.push(tab);

EDIT after updated question:
Define sessionList as a Map:
const sessionList = new Map();
Then adding entries:
sessionList.set(datesList[index], tab);
In the template you then have to replace the v-for with:
<div v-for="[key, value] in sessionList" :key="key" ...>

edited Dec 7, 2022 at 9:33

answered Dec 7, 2022 at 9:05

Thomas

7,2905 gold badges37 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

MAHA OUEGHLANI Over a year ago

I want that the index has the date value

Thomas Over a year ago

@MAHAOUEGHLANI then you need to define sessionList as a Map and iterate over the entries: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… And then you can iterate over it with: v-for="[key, value] in sessionList

MAHA OUEGHLANI Over a year ago

I edit question, actualy I have an api that render data like second image, no I'm currently developp vue part, so I made data for tests like API renders

Collectives™ on Stack Overflow

Component vue3 can't initialaize array data on created

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related