8

vuejs ライフサイクルのマウントされたフックでプロップにアクセスしようとしていますが、値がないようです

私の（本当に単純化された）コンポーネントは次のようになります。

export default {
    props: [
        'columns',
    ],
    mounted: function() {
        console.log(this.columns)
    }
}

親は次のようになります。

<script>
    import DatatableHeader from './DatatableHeader.vue';

    export default {
        data: {
            columns: [{'heading': 'Column 1'}, {'heading': 'Column 2'}]
        },
        components: {
            'datatableheader'   : DatatableHeader,
        }
    }
</script>

コンポーネントは正しくレンダリングされますが、マウントされた関数からの出力は空の配列です。タイミングの問題のようです。

私は何か間違ったことをしていますか？または、使用する必要がある別のライフサイクル フックがあります。

ありがとう！

4

1 に答える 1

3

簡単な答えは、マウントされたフックの小道具にアクセスできるということです。このフィドルをチェックすると、アラートが列の見出しを正常に表示することがわかります。https://jsfiddle.net/yj3k1wLx/1/プログラムが実行されているが空の配列を返すという事実は、実際には列配列を渡していないことを示しているようです。<test :columns="columns">フィドルをコードと比較して、参照または変数が間違っている可能性があるかどうかを確認してください。

更新 あなたのコメントに対する簡単な答えは、ルートフックをマウントではなく作成に変更することです。しかし、私はあなたがこれについて間違った方向に進んでいるように感じます。コードは見ていませんが、問題は配列の更新にあると思います。https://vuejs.org/v2/guide/list.html#Caveatsの警告を読んでから、この更新されたデモをチェックしてくださいhttps://jsfiddle.net/yj3k1wLx/4/

于 2016-11-16T18:35:19.610 に答える