如何使用 Vue Js 在另一个对象数组中渲染数组

Question

我正在使用 Laravel Vuejs，我从我的数据库中获得了一个名为 arrayService 的对象数组，通过 axios 我执行获取我获得的数组可以看到表示的位置。

var app = new Vue({
  el: '#app',
  mounted() {
  //this.getService()
  },
  data() {
    return {
    arrayService: [
        { service: '2', format: [".mp3",".mp4"] },
        { service: '3', format: [".jpg",".png"] },
      ],
    arrayFormat: [".mp3",".mp4",".jpg",".png"]
    }
  },
  methods:
  {
    getService() { 
      axios.get('/').then(function(response){
        this.arrayService = response.data

        /*I GET FROM THE DATABASE 
       arrayService: [
        { service: '2', format: [".mp3",".mp4"] },
        { service: '3', format: [".jpg",".png"] },
      ],
       */
          $.each(response.data, function (key,value) {
            $.each(JSON.parse( value.format ), (key,element) => { 
               this.arrayFormat.push(element)
               
        /*RESULT OF PARSE:
       arrayFormat: [
          { [".mp3",".mp4",".jpg",".png"] }
        ]
       */  
 
            })
         })
      })
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<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>
       <div class="row">
         <div class="col-sm-6">
         <h5>Wrong result :</h5>
           <div v-for="service in arrayService"  :key="service.id">
             <strong>Id Service:</strong> {{service.service}}
             <br>
             <strong>Format:</strong>
             <div v-for="format in arrayFormat" :key="format.id">
                {{format}}
             </div>
           </div>
            
         </div>
         <div class="col-sm-6">
         <h5>Correct result:</h5>
             <strong>Id Service:</strong> 2
             <br>
             <strong>Format:</strong>
             <br>
             .mp3
             <br>
             .mp4
             <br>
             <strong>Id Service:</strong> 3
             <br>
             <strong>Format:</strong>
             <br>
             .jpg
             <br>
             .png
           <br>
         </div>
       </div>
       <br>
       <br>
       <br>
       <br><br>
       <br>
       <br>
       <br>
       <br>
       <br>
  </div>
</div>

当我存储数组arrayService 时，我所做的是一个解析，在格式属性内，因为每个服务的格式都有另一个数组。 （见 cmets）。

通过这个 Parse，我最终将所有这些元素（格式）存储在一个名为 arrayFormat 的数组中。

我遇到的问题是，在进行推送时，它将所有内容存储在一起，这不是我想要的。

我正在寻找的是存储关于其服务的每种格式。

在 HTML 视图中，我尝试显示正确的结果，但想法是将所有这些与 VueJS 放在一起。

有什么想法吗？

Answer 1

您根本不需要arrayFormat 数组，因为您需要的数据结构已经在 API 响应中。

您可以直接迭代嵌套数组（service.format）：

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