VueJs v-for 在数组中循环一个数组

Question

我有一个代码

<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 需要一个密钥，而在我的例子中，没有密钥。有没有其他方法可以循环这种数据？谢谢

Answer 1

您可以将收益展平并使其成为计算结果属性，然后遍历它会容易得多

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>

Answer 2

你可以在 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>

VueJs v-for 在数组中循环一个数组

VueJs v-for loop an array inside an array

loops

vue.js

vuejs2

vuejs3