[Vuejs]-How to render an array inside another object array with Vue Js

by

3👍

✅

You don’t need the arrayFormat array at all, since the data structure you need is already in the API response.

You can iterate the nested array (service.format) directly:

<div v-for="service in arrayService" :key="service.service">
  ...                      👇
  <div v-for="format in service.format" :key="format">
    {{format}}
  </div>
</div>

new Vue({
  el: '#app',
  data() {
    return {
      arrayService: [{
          service: '2',
          format: [".mp3", ".mp4"]
        },
        {
          service: '3',
          format: [".jpg", ".png"]
        },
      ],
    }
  },
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div id="app">
  <div v-for="service in arrayService" :key="service.service">
    <strong>Id Service:</strong> {{service.service}}
    <br>
    <strong>Format:</strong>
    <div v-for="format in service.format" :key="format">
      {{format}}
    </div>
  </div>
</div>
👤tony19

Leave a comment