コンポーネントの小道具はVue.jsで定義されていません

Question

私は小道具を1つのビューに渡していますが、コンソールで結果を印刷すると、未定義のメッセージが表示されますが、ビューでは未定義のIDが表示されます。 /これはコードで要求を調べてください：

export default { 
    props: ['idVideo'], 
    data:() => ({ 
    videos: [] 
    }), 
    created() { 
    //do something after creating vue instance 
    this.api = new ApiCanal10({}) 
    this.getRelVideos() 

    }, 
    methods: { 
    getRelVideos: function() { 
    //print in the console 
     console.log(`video/related/${this.idVideo}`) 
    } 
    } 
} 

これは、ビューとコンソールで印刷した画像であるあなたはこれで私を助けることができる場合、私は本当に感謝します私として未定義

を送信問題。

Answer 1

はcamelCase vs. kebab-caseを参照してください：

HTML属性を[...]大文字と小文字を区別しないので、名前を支えるキャメル記法彼らのケバブケース（ハイフン区切り）相当を使用する必要があります。

Vue.component('child', { 
    // camelCase in JavaScript 
    props: ['myMessage'], 
    template: '<span>{{ myMessage }}</span>' 
}) 


<!-- kebab-case in HTML --> 
<child my-message="hello!"></child> 

したがって、あなたは次のようにコンポーネントのプロパティをバインドする必要があります。

<component-name :id-video="someVar"></component-name> 

Answer 2

私は、これはコードされている更新プログラムを使用し、親から子へ情報を渡すには：

export default { 
    updated(){ 
    this.getRelVideos() 
    }, 
    methods: { 
    getRelVideos: function() {} 
    } 
} 

そのようにコンソールにその要求を示しています。