Question

下面显示了我的数据。我正在尝试在表Item标记内循环<td>，以使其在一列中形成两个项目。

user
    >"name":"Bob"
    >"id":1
    >"Item":
        >"name":"Desk"
        >"name":"Chair"

代码

<table class="table table-hover">
    <tbody>
        <tr>
            <th>Name</th>
            <th>Items</th>
        </tr>

        <tr v-for="use in user.data" :key="use.id">
            <td>{{ use.name }}</td>
            <td v-for="a in use.item">
                {{ a.name }},
            </td>
        </tr>
    </tbody>
</table>

但是当我执行上面的代码时，它会产生另一列，就像下面的图片一样。如何将Desk和Chair放在一列中？

Answer 1

您好，请在td侧使用span标签，这是我的解决方案，p或div标签是block标签，如果您使用的是Bootstrap 4，只需将class设置为inline-block或inline

<table class="table table-hover">
    <tbody>
        <tr>
            <th>Name</th>
            <th>Items</th>
        </tr>

        <tr v-for="use in user.data" :key="use.id">
            <td>{{ use.name }}</td>
            <td>
                <span v-for="a in use.item"> {{ a.name }}, </span>
            </td>
        </tr>
    </tbody>
</table>

Answer 2

v-for在每次迭代中为您创建另一个元素。使用join功能一起显示

    <tr v-for="use in user.data" :key="use.id">
        <td>{{ use.name }}</td>
        <td>
            {{ use.item.join(", ") }},
        </td>
    </tr>

输出为Desk, Chair

Answer 3

我们可以使用lodash来做到这一点 `

  <tr v-for="use in user.data" :key="use.id">
      <td>{{ use.name }}</td>
      <td>
         {{ _.map(use.item, 'name').join(", ") }}
      </td>
  </tr>

`

Laravel + VueJS，如何在表TD标签内循环？

3 个答案: