时间戳

首页 > 解决方案 > Vue for循环多行输出

vue.js - Vue for循环多行输出

问题描述

我有以下 for 循环

<div class="w3-panel w3-blue w3-card-4"
            v-for="peer in peers"
            v-bind:key="peer"
          >
            {{ peer.hop }} {{ peer.time }}
</div>

这目前正在为每个项目生成一个单独peer.hop的面板。peer.time我怎样才能让这些项目在每次迭代中一起出现在一个面板中？

这是由此生成的 HTML 示例：

<div class="w3-panel w3-blue w3-card-4"> 10.0.0.1  </div>
<div class="w3-panel w3-blue w3-card-4">  3581895 </div>

标签： vue.js

解决方案

好的，看起来这与我如何将这些变量添加到数组中有关。我最初是这样做的：

addHop(hopIP, hopTime) {
      this.peers.push({ hop: hopIP });
      this.peers.push({ time: hopTime });
},

我将其更新为以下内容，现在可以按预期工作：

addHop(hopIP, hopTime) {
      this.peers.push({ hop: hopIP, time: hopTime });
},

推荐阅读