I’m pretty new to programming / Vuejs and I came across the following problem:

I have a table with 29-31 rows (depending on the length of the month that is to be displayed). The rows have three columns / <tds>: one for a number n, the second for the weekday and the third one for a person.

I get the data for the persons via a backend request and I have put the different persons (21 entries) into an array via a computed property called “filteredPersons”.

Now I want to only display a person in a td if a day is not on a weekend or a holiday (hence the function isWeekEndOrHoliday(n)). With the way my code is now, however, if filteredPersons[n] is not displayed, n increases by 1 and the person in the array with index n will never be displayed at all.

How can I fix this so that all the person’s names are displayed while tds inside a weekday-row are filled with a person’s name and the tds inside a weekend / holiday row remain empty?

<v-table>
    <thead>
    <tr>
        <th>Date</th>
        <th>Weekday</th>
        <th>Person</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="n in dIM" :key="n" :class="{greyRow: isWeekendOrHoliday(n) === true}">
      <td class="tf">{{n}}</td>
        <td class="tf">{{getWeekdays(n)}}</td>
      <td>
        <span v-if="!isWeekendOrHoliday(n)">
            {{filteredPersons[n]}}
        </span>
      </td>
    </tr>
    </tbody>
</v-table>

I tried to get access to a different iterator (not n) for my filteredPersons array but could not find a way to make it work.