Использование различных текстовых значений с компонентом vuetify - PullRequest
Новая
       18

Использование различных текстовых значений с компонентом vuetify

0 голосов
/ 17 января 2019

enter image description here

Я заинтересован в использовании компонента панели расширения vuetify в проекте nuxt. Я смотрю на 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 Ответ

0 голосов
/ 17 января 2019

Добавьте массив с именем 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>
...