Even after going through the VueJS tutorials multiple times, I am still unable to find a solution to this problem.
My issue revolves around displaying a list of lists using accordions, which is supposed to work smoothly with vue-strap components.
For example, if I have a list like this:
'myList': [
['el 1', 'el 2', 'el 3'], ['el 1', 'el 2'], ['el another']
]
I would expect the following layout:
List 1:
- el 1
- el 2
- el 3
List 2:
- el 1
- el 2
List 3:
- el another
However, for some reason VueJS fails to render this component...
Here's the code snippet:
<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>