带有 v-for 循环的 Vuetify 扩展面板？

Question

I am working with the Vuetify expansion panel and i am using an array Headers to loop over and get the headers and another array named elements to loop over and get the desired text. How can i make it so that the text from elements array show up only under their respective panel. So basically for the panel, Animals, only Cat an Dog show up etc.

Here is a link to the sample codepen

 new Vue({ el: "#app", data() { return { headers: [{ text: 'Animals' }, { text: 'Food' }, { text: 'Colors' } ], elements: [{ text: 'Cat', panel: 'Animals' }, { text: 'Dog', panel: 'Animals' }, { text: 'Chocolates', panel: 'Food' }, { text: 'Pizza', panel: 'Food' }, { text: 'Red', panel: 'Colors' }, { text: 'Yellow', panel: 'Colors' } ] } } })

 <link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <v-app id="inspire"> <v-expansion-panel> <v-expansion-panel-content v-for="(header,i) in headers" :key="i"> <template v-slot:header> <div>{{header.text}}</div> </template> <template v-for="element in elements" :key="element"> <v-card v-if="element.panel == 'Animals'"> <v-card-text > {{element.text}} </v-card-text> </v-card> </template> </v-expansion-panel-content> </v-expansion-panel> </v-app> </div>

So basically the Animals Content should contain Dog and Cat, Food should contain Chocolate and Pizza and Colors should contain Red and yellow. Thank You :)

Answer 1

One solution, that doesn't require changing the data format, rather than hard code the v-if as in

<v-card v-if="element.panel == 'Animals'">

You want to check if the element panel belongs to the current header

<v-card v-if="element.panel == header.text">

You can also change the data format (not tested, could be errors below)

new Vue({
    el: "#app",
    data() {
        return {
            headers: [{
                    text: 'Animals',
                    elements: [{
                            text: 'Cat'
                        }, {
                            text: 'Dog'
                        }
                    ]
                }, {
                    text: 'Food',
                    elements: [{
                            text: 'Chocolates'
                        }, {
                            text: 'Pizza'
                        }
                    ]
                }, {
                    text: 'Colors',
                    elements: [{
                            text: 'Red'
                        }, {
                            text: 'Yellow'
                        }
                    ]
                }
            ]
        }
    }
});

and then the markup would be

<div id="app">
  <v-app id="inspire">
    <v-expansion-panel>
      <v-expansion-panel-content v-for="(header,i) in headers" :key="i">
        <template v-slot:header>
          <div>{{header.text}}</div>
        </template>
        <v-card v-for="element in header.elements" :key="element">
          <v-card-text >
            {{element.text}}
          </v-card-text>
        </v-card>
      </v-expansion-panel-content>
    </v-expansion-panel>
  </v-app>
</div>

Answer 2

You can also use a computed property that returns a function (although I like @JaromandaX' first idea better, it's simpler).

computed: {
  elementsByPanel() {
    return (panel) => {
      return this.elements.filter(el => el.panel === panel);
  }
}

Use it like this

    <template v-for="element in elementsByPanel(header.text)" >
      <v-card :key="element.text">
        <v-card-text >
          {{element.text}}
        </v-card-text>
      </v-card>
    </template>      

This might be preferable if the filter criteria was more complex, as a computed property is more easily tested than an expression in the template.