javascript - 在 vuetify 组件中使用不同的文本值

Question

我有兴趣在 nuxt 项目中使用 vuetify 扩展面板组件。我在看 https://vuetifyjs.com/en/components/expansion-panels#examples .这些示例都基于如下代码为每个子面板显示相同的文本和标题:

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

如何让每个子面板具有不同的标题和文本？

Answer 1

添加一个名为 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>