使用不同的文本值与vuetify组件(Using different text values wit

我感兴趣的是在nuxt项目使用vuetify扩展面板组件。我在看https://vuetifyjs.com/en/components/expansion-panels#examples 。该exampleas都显示出基于代码看起来像每个子面板相同的文字和标题：

<v-app id="inspire">
<div>
  <div class="text-xs-center mb-3">{{ panel }}</div>
  <v-expansion-panel
    v-model="panel"
    expand
  >
    <v-expansion-panel-content
      v-for="(item, i) in 5"
      :key="i"
    >
      <div slot="header">Item</div>
      <v-card>
        <v-card-text class="grey lighten-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</v-card-text>
      </v-card>
    </v-expansion-panel-content>
  </v-expansion-panel>
</div>

 new Vue({ el: '#app', })

 <script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.js"></script> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.css"> <div id="app"> <v-app id="inspire"> <v-expansion-panel> <v-expansion-panel-content v-for="(item,i) in 5" :key="i"> <div slot="header">Item</div> <v-card> <v-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</v-card-text> </v-card> </v-expansion-panel-content> </v-expansion-panel> </v-app> </div>

我如何获得每个子面板有一个不同的标题和文字？

添加阵列称为items无论你想你的数据对象，或者和数组内的每个项目是一个对象，它有两个属性header和text通过模板进行如下的阵列和循环：

 new Vue({ el: '#app', data() { return { panel: 'Sample panel', items: [{ header: 'item 1', text: 'Lorem ipsum dolor sit amet, consectetur' }, { header: 'item 2', text: 'sed do eiusmod tempor incididunt ut labore et' }, { header: 'item 3', text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, dolore magna aliqua. Ut enim ad minim veniam, commodo consequat.' }, { header: 'item 4', text: 'quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea' }, ] } } })

 <script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.js"></script> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.css"> <div id="app"> <v-app id="inspire"> <v-expansion-panel> <v-expansion-panel-content v-for="(item,i) in items" :key="i"> <div slot="header">{{item.header}}</div> <v-card> <v-card-text>{{item.text}}</v-card-text> </v-card> </v-expansion-panel-content> </v-expansion-panel> </v-app> </div>