Vuejs：ハッシュの配列を渡して

Question

これはおそらく些細な質問ですが、私はこれをどうやって動かすかを考え出していません。私は私のVue.jsプロジェクトの別のコンポーネントに小道具として配列のハッシュを渡そうとしています。

私のコードは次のようなものになります。

Sidebar.vue

<template> 
    <b-nav vertical> 
    <b-nav-item v-for='nav in items' :key='nav.title' :to='nav.url'> 
     {{nav.title}} 
    </b-nav-item> 
    </b-nav> 
</template> 

<script> 
    export default { 
    props: { 
     items: { 
     type: Array, 
     default:() => [] 
     } 
    } 
    } 
</script> 

そして、私のようなこのコードを呼び出すいます：

<template> 
    ... 
    <sidebar :items="myItems"/> 
    ... 
</template> 

<script> 
    import Sidebar from '~/components/Sidebar.vue' 

    export default { 
    components: { 
     Sidebar 
    }, 
    data:() => { 
     return { 
     myItems: [ 
      { 
      title: 'Link 1', 
      url: '/link1' 
      }, 
      { 
      title: 'Link 2', 
      url: '/link2' 
      }, 
      { 
      title: 'Link 3', 
      url: '/link4' 
      }, 
      { 
      title: 'Link 4', 
      url: '/link4' 
      } 
     ] 
     } 
    } 
    } 
</script> 

はしかし、何も上に表示されていないがページ。 サイドバーコンポーネントにハッシュの配列を小道具として渡すにはどうすればよいですか？

ありがとうございます！

Answer 1

あなたがdocumentationによるとdata() {

に矢印機能data:() => {を変更する必要があります：あなたは、データプロパティ（例えばdata:() => { return { a: this.myProp }}）と矢印機能を使用しないでください

注意を。その理由は、矢印関数が親コンテキストをバインドするため、期待通りVueインスタンスにならず、this.myPropは未定義になります。