Как перебрать массив в компоненте Vue?

Question

Я пытаюсь перебрать массив props_nfl_days, равный ["Sunday", "Thursday Night", "Monday Night"], поэтому он отображается в виде заголовка для каждой группы результатов НФЛ по дням недели.Компонент выглядит следующим образом:

Обновленный код:

    const nfl = {
    nflComponent: Vue.component("tab-nfl", {
    props: [
      "props_league_data_nfl",
      "props_nfl_days",
      "props_league_standings"
    ],
    template: `
            <div class="vue-root-element">
                <div class="container nfl-scores">
                    <div v-for="(dayDataArray, index) in props_league_data_nfl">
                    <p> {{ index }} </p>

                    <h2> {{ props_nfl_days[index] }} </h2>
                        <div class="row"> 
                            <div class="col-xs-12 col-md-4 col-lg-3" v-for="arrayItem in dayDataArray"> 

                                <table class="table table-striped table-sm">   
                                <thead>
                                    <th scope="col" class="box-score-status is-completed" v-if="arrayItem.isCompleted">Final</th>
                                </thead>

                                    <tbody>
                                        <tr>
                                            <td class="box-score-team"> {{ arrayItem.game.awayTeam.Abbreviation }} </td>
                                            <td class="box-score-inning" v-for="quarter_score in arrayItem.quarterSummary.quarter">
                                                {{quarter_score.awayScore }}</span>
                                            <td class="box-score-final" v-bind:class="{ won: arrayItem.awayScore > arrayItem.homeScore }">{{ arrayItem.awayScore }}
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="box-score-team"> {{ arrayItem.game.homeTeam.Abbreviation }} </td>
                                            <td class="box-score-inning" v-for="quarter_score in arrayItem.quarterSummary.quarter">
                                                {{quarter_score.homeScore }}
                                            </td>
                                            <td class="box-score-final" v-bind:class="{ won: arrayItem.homeScore > arrayItem.awayScore }">{{ arrayItem.homeScore
                                                }}
                                            </td>
                                        </tr>
                                        <tr><td class="box-score-team w-150">Location:  {{ arrayItem.game.location }} </td></tr>
                                    </tbody>
                                </table>  

                            </div> <!-- End v-for dayDataArray -->
                        </div>  <!-- End row -->
                    </div> <!-- End v-for props_league_data_nfl -->

                </div> <!-- End container -->

Все, что я получаю, это то, что индекс идет в 0 и все.props_league_data_nfl - это объект с тремя свойствами.Вот снимок вывода панели Vue:

Мне нужен правильный элемент массива nfl_days в заголовке h2 для каждой группы props_league_data_nfl.Смотрите рисунок:

Я бы хотел, чтобы эти заголовки воскресенья были соответственно ночью четверга и ночью понедельника.Любое руководство о том, как этого добиться, приветствуется.

Answer 1

Вычисленные свойства не должны иметь побочных эффектов.Вычисленные свойства кэшируются на основе их зависимостей;поскольку increment не видит каких-либо изменений в своих зависимостях, он не пересчитывает его значение.Так что increment будет выполняться один раз и всегда будет возвращать одно и то же значение: 0.

v-for принимает дополнительные параметры для ключа (в случае итерации по свойствам объекта) и текущего индекса, поэтомуВы можете удалить вычисленное свойство increment и переписать свой шаблон следующим образом:

<div v-for="(dayDataArray, key, index) in props_league_data_nfl">
  **<h2> {{ props_nfl_days[index] }} </h2>**