Vue for loop multi-line output

Question

I've got the following for loop

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

This is currently producing an individual panel for each peer.hop and peer.time item. How can I get those items to appear together in a single panel per iteration?

Here is an example of HTML generated by this:

<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>

this has more to do with the CSS framework you're using than with Vue, check the HTML code generated by this operation and you'll see that everything is in order. Maybe the CSS is made such that every text node inside a panel is separate — fixmycode
– fixmycode, Commented Nov 23, 2020 at 21:16
@fixmycode the generated HTML does seem to split these into multiple <div> instances, I will update the initial post with an example of the generated HTML — Kevin Massey
– Kevin Massey, Commented Nov 23, 2020 at 23:27

Kevin Massey · Accepted Answer · 2020-11-23 23:44:33Z

1

Ok, looks like this had to do with how I was adding these variables to the array. I was originally doing this:

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

and I updated it to the following, which is now working as expected:

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

answered Nov 23, 2020 at 23:44

Kevin Massey

236 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue for loop multi-line output

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related