使用 v-for 遍历嵌套数组

Question

我有一个关于 v-for 的问题。我有一个如下所示的对象：

在开发控制台中它看起来像这样：

现在我的问题是，如何使用 v-for 遍历每个数组以及主数组中的数组。我试过但没用。

提前致谢！

Answer 1

演示：

new Vue({
  el:"#app",
  data:{
    items: [{
        messageSettings: [{
        userOne: '1',
        userTwo: '2'
      }],
      profile: [{
        freelancerAbout: 'about1',
        freelancerName: 'name1'
      }],
      messages: [{
        id: 1,
        name: 'message1'
      }]
    }]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <div v-for="item in items" :key="item">
      <p v-for="msgSetting in item.messageSettings" :key="msgSetting">
        <span>UserOne: {{ msgSetting.userOne }}</span><br>
        <span>UserTwo: {{ msgSetting.userTwo }}</span>
      </p>
      <p v-for="profile in item.profile" :key="profile">
        <span>freelancerName: {{ profile.freelancerAbout }}</span><br>
        <span>freelancerName: {{ profile.freelancerName }}</span>
      </p>
    </div>
</div>

使用 v-for 遍历嵌套数组

iteration trough the nested array with v-for

javascript

vue.js

google-cloud-firestore

quasar-framework