对 vuetify 组件使用不同的文本值

Posted 2023-02-23

【中文标题】对 vuetify 组件使用不同的文本值

【英文标题】：Using different text values with vuetify component

【发布时间】：2019-06-11 23:41:47

【问题描述】：

我有兴趣在 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>

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

【参考方案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>