VueJs v-for 在数组中循环数组答案

【问题标题】：VueJs v-for loop an array inside an arrayVueJs v-for 在数组中循环数组
【发布时间】：2021-02-04 04:27:02
【问题描述】：

我有一个代码

<div v-for="benefit in service.benefits">
    <p>{{benefit}}</p>
</div>

这是数据

service: [
  {title: 'blablabla',
  price: '123',
  benefits: ['a', 'b']},

  {title: 'blaaablabla',
  price: '12345',
  benefits: ['aa', 'bb']},
]

我想在好处中循环数据，但它不起作用，因为 v-for 需要一个密钥，而在我的情况下，没有密钥。有没有其他方法可以循环这种数据？谢谢

【问题讨论】：

标签： loops vue.js vuejs2 vuejs3

【解决方案1】：

你可以在 v 中使用 v-for ：

var app = new Vue({
  el: '#app',
  data: {
    service: [{
        title: 'blablabla',
        price: '123',
        benefits: ['a', 'b']
      },
      {
        title: 'blaaablabla',
        price: '12345',
        benefits: ['aa', 'bb']
      },
    ]
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
  <div v-for="(item, i) in service" :key="i">
    <p>{{item.title}}</p>
    <p>My Benefits :</p>
    <p v-for="(benefit, index) in item.benefits" :key="index">
    {{benefit}}
    </p>
  </div>
</div>

【讨论】：

【解决方案2】：

您可以将好处展平并使其成为计算属性，然后迭代它会容易得多

var app = new Vue({
  el: '#app',
  data: {
    service: [{
        title: 'blablabla',
        price: '123',
        benefits: ['a', 'b']
      },
      {
        title: 'blaaablabla',
        price: '12345',
        benefits: ['aa', 'bb']
      },
    ]
  },
  computed: {
    benefits: function() {
      return this.service.flatMap(({
        benefits
      }) => benefits)
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
  <div v-for="(benefit, i) in benefits" :key="i">
    <p>{{benefit}}</p>
  </div>
</div>

【讨论】：

感谢您的回答！它实际上对我有用！实际上，我正在制作几张卡片，每张卡片都有自己的优点。但是，您的答案会打印出每个对象的所有好处。除此之外，谢谢你，我会研究 flatmap :)