Question

我正在尝试遍历等于props_nfl_days的数组["Sunday", "Thursday Night", "Monday Night"]，因此它在星期几显示为每组NFL得分的标题。该组件如下所示：

更新代码：

    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面板输出的快照：

我想要的是每个props_league_data_nfl组的h2标头中的正确nfl_days数组元素。查看图片：

我希望这些星期日标题分别是星期四晚上和星期一晚上。任何有关如何实现这一目标的指导都值得赞赏。

Answer 1

计算的属性不应有副作用。根据计算属性的依赖关系对其进行缓存；由于increment的依存关系没有任何变化，因此不会重新计算其值。因此，increment将运行一次，并且始终返回相同的值：0。

v-for为密钥（在遍历objet属性的情况下）和当前索引采用其他参数，因此您可以删除increment计算的属性并按如下方式重新编写模板：

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

如何遍历Vue组件中的数组？

1 个答案: