Wie kann ich V-Fors in meine Komponentendatei verschachteln?

Question

Ich habe die VueJS Tutorials gelesen, aber ich kann immer noch keine Lösung finden.

Ich habe eine Liste von Listen, und ich möchte sie mit Akkordeons anzeigen (das ist eine Komponente von Vue-Strap, getestet, um mehrmals richtig zu funktionieren).

mit So eine Liste wie:

'myList': [ 
    ['el 1', 'el 2', 'el 3'], ['el 1', 'el 2'], ['el another'] 
] 

Ich würde erwarten, die folgende Darstellung:

Liste 1:

• el 1
• el 2
• el 3

Liste 2:

• el 1
• el 2

Liste 3:

• el andere

Aber VueJS diese Komponente nicht zu machen. ..!

Der Code ist wie folgt:

<template> 
    <accordion id="rabo" :one-at-atime="true"> 
    <template v-for="list in myLists"> 
     <panel header="List #{{ $index }}" :is-open="true"> 
     <ul> 
      <li v-for="el in list"> 
      {{el}} 
      </li> 
     </ul> 
     </panel> 
    </template> 
    </accordion> 
</template> 

<style lang="scss" scoped> 
</style> 

<script> 
    import Vue from 'vue' 
    import { accordion, panel } from 'vue-strap' 

    module.exports = { 
    components: { 
     'accordion': accordion, 
     'panel': panel 
    } 
    } 

    new Vue({ 
    el: '#rabo', 
    data: { 
     'myLists': [['el 1', 'el 2', 'el 3'],['el 1','el 2'],['el another']] 
    } 
    }) 
</script>