[Vuejs]-How to loop through arrays inside a object in vue.js using v-for

by

0👍

✅

You could do it a couple of ways,

Either loop through output.player and output.monster individually as in my snippet.

Or just nest as @LLai pointed out which helps in case there are unknown number of properties in the output object.

new Vue({
  el: app,
  data: {
    output: {
      player: [1, 5, 61, 98, 15, 315, 154, 65],
      monster: [14, 165, 113, 19, 22],
    },
  },
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <span>
    <h6 v-for="pla in output.player">{{pla}}</h6>
    <h6 v-for="mon in output.monster">{{mon}}</h6>
  </span>
</div>

0👍

It sounds like you want a nested v-for. The first v-for loops through the object where value is the object values (in your case the array of numbers). The second v-for loops through that array

<div id="app">
  <div v-for="value in output">
      <span v-for="num in value">
          {{ num }}
      </span>
  </div>
</div>

Leave a comment