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

Question

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

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

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

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>

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

Using different text values with vuetify component

javascript

vue.js

vue-component

nuxt.js

vuetify.js