[Vuejs]-Vue how to traverse the list correctly?

by

0👍

✅

Are you asking that the (+) being inside the loop of your goods and gift ?

<div id="app">
  <div class="mui-row" v-for="item in list">
    <div class="span-title-main">
      <span class="span-title">{{item.name}}</span>
    </div>
    <br>
    <ul>

      <li>
        <div class="mui-col" v-for="items in item.goods">
          <span class="span-name">{{items.name}}</span>
          <div class="addspan">+</div>
        </div>

        <div class="mui-col" v-for="itemss in item.gift">
          <span class="span-name">{{itemss.name}}</span>

        </div>

      </li>
    </ul>
  </div>
</div>

Edit: Remove the (+) for gifts loop as requested by OP.

Note: if the OP is asking to have a style for element in between goods and gift. I would suggest to use the css :last selector with a display:none to have this kind of effect.

👤mathk

0👍

It looks like the only difference is that you want a + button to appear after each item.goods instead of just one after the loop.

So put it inside the loop:

    <template v-for="items in item.goods"><!-- using "template" to avoid modifying your html structure; you could of course use any tag -->
      <div class="mui-col">
        <span class="span-name">{{items.name}}</span>
      </div>
      <div class="addspan">+</div>
    </template>
    <div class="mui-col" v-for="items in item.gift">
      <span class="span-name">{{items.name}}</span>
    </div>
    <!-- your image doesn't show a + button after gifts, so I've omitted it here -->
👤Daniel Beck

Leave a comment