CODEWITHSUNDEEP
vuejs2
Alan
Alan

Reputation: 1287

How to iterate through an array in a Vue component?

I am trying to iterate through the array props_nfl_days which is equal to ["Sunday", "Thursday Night", "Monday Night"] so it appears as a header for each group of NFL scores by day of the week. The component looks like:

Updated Code:

    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 -->

All I get is index goes to 0 and thats it. props_league_data_nfl is an objectwith three properties. Here is a snapshot of the output of Vue panel :

Vue Panel

What I want is the correct nfl_days array element in h2 header for each props_league_data_nfl group. See picture:

Sample Picture

I would like these Sunday headers to be Thurday Night and Monday Night respectively. Any guidance on how to achieve this much appreciated.

Upvotes: 1

Views: 638

Answers (1)

chipit24
chipit24

Reputation: 6987

Computed properties should not have side effects. Computed properties are cached based on their dependencies; since increment doesn't see any changes in its dependencies, it does not re-compute its value. So increment it will run once and always return the same value: 0.

v-for takes additional parameters for the key (in the case of iterating over objet properties) and the current index, so you can remove the increment computed property and re-write your template like so:

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

Upvotes: 2

Related Questions