1

VueJS チュートリアルを読みましたが、まだ解決策が思いつきません。

リストのリストがあり、それらをアコーディオン (vue-strap のコンポーネントであり、以前に数回正常に動作することがテストされています) を使用して表示したいと考えています。

したがって、次のようなリストがあります。

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

次の視覚化が期待されます。

リスト 1:

  • エル1
  • エル2
  • エル3

リスト 2:

  • エル1
  • エル2

リスト 3:

  • もう一つ

しかし、VueJS はこのコンポーネントをレンダリングしていません...!

コードは次のとおりです。

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

1 に答える 1

2

あなたがすべき：

  1. Vue インスタンスを別のファイルに作成する
  2. myLists配列をdataof コンポーネントに入れます
  3. header小道具を縛る

MyAccordion.vue

<template>
  <accordion :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>

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

  export default {
    components: {
      accordion, panel
    },

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

Vue インスタンス

import Vue from 'vue'
import MyAccordion from './MyAccordion.vue'

new Vue({
  el: '#demo',
  components: { MyAccordion }
})

http://www.webpackbin.com/VyPHjF_V-

于 2016-06-14T06:40:43.253 に答える