Vueインスタンスからネストされたコンポーネントにデータを渡すには

VUEインスタンスからAJAX経由でデータを取得し、そのデータをコンポーネントに渡す必要があります。Vueインスタンスからネストされたコンポーネントにデータを渡すには

[Vue warn]: Property or method "sectors" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

：私は次のエラーを取得する

<!DOCTYPE html> 
<html lang="en"> 
    <meta charset="UTF-8"> 
    <title>mysite</title> 
</head> 
<body> 

<div id="app"> 
    <parent-component></parent-component> 
</div> 

<template id="parent-component-template"> 
    <div id="the-template"> 
     <div class="the-list"> 
      <span is="sector-item" v-for="item in sectors" :sector="item"></span> 
     </div> 
     <button>Button</button> 
    </div> 
</template> 

<template id="sector-item-template"> 
    <span> 
     {{ sector.name }} 
    </span> 
</template> 

<!-- Vue.js --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script> 

<script> 
    Vue.component('parent-component', { 
     template: '#parent-component-template' 
    }); 

    Vue.component('sector-item', { 
     props: ['sector'], 
     template: '#sector-item-template' 
    }); 

    let app = new Vue({ 
     el: '#app', 
     data: { 
      sectors: [{ 
       'id': 1, 
       'name': 'Industry' 
      }] 
     } 
    }); 
</script> 

</body> 
</html>

：

ここ

がaproximately私のコードです...私は今Vue.jsがどのように機能するかを学んでいますが、私は少し断片的なドキュメントを見つけます

どこでミスをしますか？

出典

2017-08-24 AntonioRomero

親コンポーネントに小道具として 'sectors'を渡す必要があります – thanksd

https://vuejs.org/v2/guide/components.html#Props –

あなたのコードは完全ではないと思います。私は怒鳴るスニペットでは、あなたがしようとして何をシミュレートしてみました：

Vue.component('parent-component', { 
 
    props: ['sectors'] 
 
}); 
 

 
Vue.component('child-component', { 
 
    props: ['item'] 
 
}); 
 

 
new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    sectors: [ 
 
     { 
 
     'id': 1, 
 
     'name': 'Industry' 
 
     }, 
 
     { 
 
     'id': 2, 
 
     'name': 'Education' 
 
     } 
 
    ] 
 
    } 
 
});

.the-list > div { 
 
    padding: 5px; 
 
    border: 1px solid gray; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script> 
 

 
<div id="app"> 
 
    <parent-component :sectors="sectors" inline-template> 
 
    
 
    <div class="the-list"> 
 
     <child-component :item="sector" :key="sector.id" v-for="sector in sectors" inline-template> 
 
     <div> 
 
      <span v-text="item.name"></span> 
 
      <button>Button</button> 
 
     </div> 
 
     </child-component> 
 
    </div> 
 
    
 
    </parent-component> 
 
</div>

をVueのインスタンスは、プロパティsectorsを所有していると私は<parent-component>からpropとして、このプロパティを可決しました。

<parent-component>には、Vueのメインインスタンスからsectorsの値を受け取ったsectors（別の名前でも可）と呼ばれる小道具があります。私はv-forを使用して親コンポーネントの<child-component>に配列の各項目を渡すすべての項目を繰り返しました。

<child-component>にはitemという小道具があり、その中で配列の各要素の値を渡しました。

詳しくはhereをご覧ください。

この回答が役に立ちそうです。

出典

2017-08-24 15:34:35

非常に役に立ちます。どうもありがとう！ :) – AntonioRomero

Vueインスタンスからネストされたコンポーネントにデータを渡すには

答えて

関連する問題