Vue：如何在 tbody 中有条件地渲染 tr答案

【问题标题】：Vue: How to conditionally render tr in tbodyVue：如何在 tbody 中有条件地渲染 tr
【发布时间】：2018-09-10 01:47:58
【问题描述】：

我有一个包含多行的表格主体，例如：

<table>
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
</table>

我想有条件地组合 v-if 和 v-for，以有条件地呈现一个或多个附加行。 Vue 手册说要将 v-for 包装在 v-if 中，如下所示：

<div v-if="team.positions != null">
    <my-row v-for="position in team.positions"
                :position="position"
                :key="position.id">
    </my-row>
</div>

问题是我不能将 div 放入 tbody 或任何其他元素中。解决办法是什么？

【问题讨论】：

标签： vue.js

【解决方案1】：

在没有元素适合的情况下，you can use <template>，例如：

<template v-if="team.positions != null">
    <my-row v-for="position in team.positions"
                :position="position"
                :key="position.id">
    </my-row>
</template>

演示：

new Vue({
  el: '#app',
  data: {
    showTwoRows: true
  }
})

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <table>
    <tr>
      <td>A</td><td>B</td>
    </tr>
    <template v-if="showTwoRows">
      <tr>
        <td>1</td><td>2</td>
      </tr>
      <tr>
        <td>3</td><td>4</td>
      </tr>
    </template>
    <tr>
      <td>C</td><td>D</td>
    </tr>
  </table>
  <button @click="showTwoRows = !showTwoRows">Toggle two middle rows</button>
</div>

虽然在你的那个具体例子中，它似乎不需要。您是否尝试过不使用v-if：

<my-row v-for="position in team.positions"
            :position="position"
            :key="position.id">
</my-row>

因为v-for 的值为undefined/null/0/[]/'' 时不会迭代（不会抛出错误）：

new Vue({
  el: '#app',
  data: {
  	message: "If I'm being displayed, Vue works!",
    team: {
      positionsU: undefined,
      positionsN: null,
      positionsZ: 0,
      positionsE: [],
      positionsS: ''
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message }}</p>
  <table>
    <tr v-for="position in team.positionsU"><td>u: {{ position }}</td></tr>
    <tr v-for="position in team.positionsN"><td>n: {{ position }}</td></tr>
    <tr v-for="position in team.positionsZ"><td>z: {{ position }}</td></tr>
    <tr v-for="position in team.positionsE"><td>e: {{ position }}</td></tr>
    <tr v-for="position in team.positionsS"><td>s: {{ position }}</td></tr>
    <tr v-for="position in team.positionsF"><td>f: {{ position }}</td></tr>
  </table>
</div>

【讨论】：

不错的一个。你在两个分数上都是对的。我有另一个错误是抛出错误...
template 标签的添加就像一个魅力。非常感谢！

【解决方案2】：

您可以在同一个标签上使用v-for 和v-if，但是，它的工作方式与您的预期不同。

在v-if 中，您可以引用迭代项，因为v-for 在v-if 之前执行

<div v-if="team.positions != null">
    <my-row v-for="position in team.positions" v-if="position"
                :position="position"
                :key="position.id">
    </my-row>
</div>

这仍将遍历team.positions 中的所有positions，如果不满足v-if 中的条件，则不会停止for 循环，而是跳过它。

这样想：

for (var i = 0; i < array.length-1; i++) {
    if (array[i]) {
        doTheThing();
    }
}

【讨论】：

【解决方案3】：

我不确定这是否正是最初的问题所要寻找的，但我只是遇到了一个类似的问题，我想忽略呈现项目价格为 0 的行。

我在包含v-for 的<tr> 中使用v-if 遇到了问题。我通过简单地使用 v-show 来解决它。

所以这对我来说非常有效。

<tr v-show="item.price !== 0" :key="item._id" v-for="item in items"> ... </tr>

【讨论】：