在 vuetify 组件中使用不同的文本值 [英] Using different text values with vuetify component

问题描述

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

<div><div class="text-xs-center mb-3">{{面板}}</div><v-扩展面板v-model="面板"扩张><v-展开-面板-内容v-for="(item, i) in 5":key="我"><div slot="header">Item</div><v-card><v-card-text class="grey lighten-3">Lorem ipsum dolor sat amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exeritation ullamco Laboris nisi ut aliquip ex ea commodo consequat.</v-card-text></v-card></v-expansion-panel-content></v-扩展面板>

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|材料+图标"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.css"><div id="应用程序"><v-app id="inspire"><v-扩展面板><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 sat amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exeritation ullamco Laboris nisi ut aliquip ex ea commodo consequat.</v-card-text></v-card></v-expansion-panel-content></v-扩展面板></v-app>

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

解决方案

向数据对象添加一个名为 items 或任何你想要的数组，该数组中的每个项目都是一个对象，它有两个属性 header 和 text，并在模板中循环遍历该数组，如下所示:

new Vue({el: '#app',数据() {返回 {panel: '样本面板',项目: [{标题:'项目1'，文本:'Lorem ipsum dolor 坐 amet，consectetur'},{标题:'项目2'，文本:'sed do eiusmod tempor incididunt ut Labore et'},{标题:'项目3'，文字:'Lorem ipsum dolor sat amet，consectetur adipiscing elit，dolore magna aliqua.Ut enim ad minim veniam，commodo consequat.},{标题:'项目4'，文本:'quis nostrud 练习 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|材料+图标"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.css"><div id="应用程序"><v-app id="inspire"><v-扩展面板><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-扩展面板></v-app>

I'm interested in using a vuetify expansion panel component in a nuxt project. I'm looking at https://vuetifyjs.com/en/components/expansion-panels#examples . The exampleas all show the same text and header for each subpanel based on code that looks like:

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

How do I get each subpanel to have a different header and text?

解决方案

Add an array called items or whatever you want to your data object, and each item inside that array is an object which has two properties header and text, and loop through that array in your template as follows :

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 组件中使用不同的文本值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！