CODEWITHSUNDEEP
javascriptarraysvue.jsmomentjs
CometZ
CometZ

Reputation: 115

How do I edit each individual array element in v-for loop with Vue3?

Basically I have this calendar row with date info on each element:enter image description here

I'm trying to stop that loop of single data so that each calendar item has it's own data about the current and the next days.

The first calendar element should always display the current day, the rest of the items are the remaining days

Template

<template>
<div class="wrapper">
  <div class="calendar-wrapper">
      <div class="calendar-row"
           v-for="(day, idx) in dayArr"
           :key="idx"
        >
          <div
            id="card"
            class="day-card unactive"
            @click="test(idx)"
          > 
              <div class="card-info">
                <p class="name">{{ dayOfWeek }}</p>
                <p class="day">
                    {{ currDay }} 
                </p>
              </div>
             <div class="dot-wrapper">
                <div class="dot-status undone" />
                <div class="dot-status undone" />
             </div>
          </div>

      </div>
  </div>
</div>
</template>

Script


 setup() {
        const moment = require('moment')
        const m = moment

        // Get the remaining month days starting from today:
        const daysRemainingThisMonth = moment().endOf('month').diff(moment(), 'days');

        // Turn the remaining days into an array for future rendering in the Template
        let dayArr = Array(daysRemainingThisMonth)
    
        // Get the index of a clicked calendar item:
        const test = (idx) => {
            console.log(idx + 1);
        }

        // Get the current day:
        const currDay = m().format('D')
        // Get the current week day:
        const dayOfWeek = m().format('dddd')
}

I believe that there is a way to somehow access each calendar element and give it it's own data, but I have no idea how

Upvotes: 1

Views: 407

Answers (1)

ghazal khaki
ghazal khaki

Reputation: 634

I've changed your code using moment features and it shows correctly in this link.

As you see I use moment().add(<countingOfDiffrenceFromToday>, 'day') to reach the exact day and push it to the array and use it in v-for loop.

Upvotes: 2

Related Questions