Comment imbriquer des v-fors dans mon fichier de composant?

Question

J'ai lu les tutoriels de VueJS mais je n'arrive toujours pas à trouver une solution.

J'ai une liste de listes, et je veux les afficher en utilisant des accordéons (qui est un composant de vue-strap, testé pour fonctionner correctement plusieurs fois auparavant).

donc d'avoir une liste telle que:

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

je me attends à la visualisation suivante:

Liste 1:

• el 1
• el 2
• el 3

Liste 2:

• el 1
• el 2

Liste 3:

• el un autre

Mais VueJS n'est pas le rendu ce composant. ..!

Le code est le suivant:

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