Vuejs2 如何迭代Vue组件中的数组？

我试图遍历数组

props\u nfl\u days

，该数组等于

[“星期日”、“星期四晚上”、“星期一晚上”]

，因此它显示为一周中每一天每组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 -->

const nfl={
nflComponent:Vue.component（“选项卡nfl”{
道具：[
“道具联盟数据nfl”，
“道具日”，
“道具联盟排名”
],
模板：`
{{index}}

{{props_nfl_days[index]}
最终的
{{arrayItem.game.awayTeam.缩写}
{{quarter_score.awayScore}}
{{arrayItem.awayScore}
{{arrayItem.game.homeTeam.缩写}
{{quarter_score.homeScore}}
{{arrayItem.homeScore
}}
位置：{{arrayItem.game.Location}

我得到的只是索引变为0，就这样。props\u league\u data\u nfl是一个具有三个属性的对象。下面是Vue面板输出的快照：

我想要的是每个道具联盟数据nfl组的h2标题中正确的nfl天数数组元素。请参见图片：

---

我希望这些星期日标题分别是星期四晚上和星期一晚上。关于如何实现这一点的任何指导都非常受欢迎。

计算属性不应该有副作用。计算属性是根据它们的依赖关系缓存的；因为

increment

在其依赖关系中看不到任何更改，所以它不会重新组合计算它的值。这样它将运行一次并始终返回相同的值：

0

v-for

为键（在迭代对象属性的情况下）和当前索引获取附加参数，因此您可以删除

增量

计算属性，然后像这样重新编写模板：

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

**{{props_nfl_days[index]}**

谢谢。虽然我现在从道具联盟数据（即道具联盟数据）中获得了索引，但道具联盟数据（即道具联盟数据）天数[星期日数据]等等。不是数字索引，我需要在道具中吐出足球的相应天数。更新了我的答案，v-for与数组和对象一起使用时有点不同：索引作为对象的第三个参数传递。是的，是的。我刚刚尝试过，现在效果很好。索引必须与对象定位。谢谢中国。。。