使用 vue.js 同时迭代多个列表答案

【问题标题】：Iterate over multiple lists simultaneously using vue.js使用 vue.js 同时迭代多个列表
【发布时间】：2018-10-08 12:21:17
【问题描述】：

是否可以使用JavaScript 同时遍历多个列表？我之所以关注vue.js，是因为如果可以的话，我会在HTML标签中使用它。

listA = ('itemA1', 'itemA2');
listB = ('itemB1', 'itemB2');

<div v-for="A in listA" v-for="B in listB">
   <span>A value is: @{{A}}</span>
   <span>B value is: @{{B}}</span>
</div>

编辑：

简要说明我将如何使用它。这个问题实际上与我已经问过before 的问题有关。由于我将有两列的表，其中第一列将包含表的标题，第二列包含数据，我需要以某种方式使它们位于同一行中。现在，如果您检查我在那里链接的问题，您应该会发现这些表格应该是什么样子。但是，当我在其中一些 td 标记中将数据分成更多行时，我遇到了问题。例如：

+---------+-------------+
| Name    | Christopher |
| Middle    Christy     |
| Surname | Ashton      |
|         | Kutcher     |
| ------- | ----------- |

我需要将其显示为：

+---------+-------------+
| Name    | Christopher |
|           Christy     |
| Middle  | Ashton      |
| Surname | Kutcher     |
| ------- | ----------- |

【问题讨论】：

我需要显示它们，但有什么区别？如果我可以遍历它们，难道我也不能显示它们吗？

标签： javascript vue.js

【解决方案1】：

您可以为此使用computed properties。

例如

listA = ['itemA1', 'itemA2'];
listB = ['itemB1', 'itemB2'];

// add a computed property that merges the 2 arrays into a single array of objects
{
  computed: {
    list() {
      return listA.map((itm, i) => {
        return { A: itm, B: listB[i] }
      })
    }
  }
}

<div v-for="obj in list">
   <span>A value is: @{{obj.A}}</span>
   <span>B value is: @{{obj.B}}</span>
</div>

请注意，这是未经测试的代码，并且不安全，您应该检查 listB 是否具有该索引，例如如果 listA 包含 5 个项目，而 listB 包含 4 个项目，则会出错。

【讨论】：

【解决方案2】：

这应该可以工作

<div v-for="(A, index) in listA>
    <span>A value is: @{{A}}</span>
    <span v-if="listB[index]'>B value is: @{{listB[index]}}</span>
</div>

【讨论】：

【解决方案3】：

这对我有用！ :)

我有两个元素数量相同的数组。

<div
      v-bind:key="index"
      v-for="(example, answer, index) in currentQuestion.examples"
    >
      <div class="row">
        <div class="col-md-6">
          <p>
            <button class="btn btn-secondary btn-lg btn-block">
              {{ example }}
            </button>
          </p>
        </div>
        <div class="col-md-6">
          <p>
            <button class="btn btn-secondary btn-lg btn-block">
              {{ currentQuestion.answers[index + 1] }}
            </button>
          </p>
        </div>
      </div>
    </div>

【讨论】：