前提

  • 非同期通信で親子関係をもったリストをとりたい
  • 今回は DataBase – Table みたいな親子関係でDataBaseのnameをキーにTable一覧をとるAPIを叩く想定
  • 親(Hoge)のプロパティ(fuga)を子供に受け渡すことのみを命をかけている。

結論

これでうまくいきました。死んだ僕達の願いは後半に書いてます。

var parent = Vue.extend({
    name: 'parent-component',
    template:
        '
  • ' +
            '' +
        ''
    ,
    data: function () {
        return {
            databases: []
        }
    },
    created: function () {
        var that = this;
        axios.get('/database')
            .then(function (response) {
                that.databases = response.databases;
            });
    }
});

var child = Vue.extend({
    name: 'child-component',
    props: ['database'],
    template:
      '
  • ' +
          '{{ table.name }}' +
      '
    • ',
    data: function () {
        return { tables: [] }
    },
    created: function() {
        var that = this;
        axios.get('/database/' + that.database)
            .then(function (response) {
                that.tables = response.tables;
            });
    }
});

Vue.component('parent-component', parent);
Vue.component('child-component', child);

    ハマったところ

    子コンポーネントへの値の渡し方

    あれやこれや試して上記にたどりついた。
    数々の死んだ俺たちを以下に残します。

    1. 普通に渡してみた
    var parent = Vue.extend({
    name: 'parent-component',
    template:
        '
  • ' +
            '' +
        ''
    ,
    ...
});

    • 変更点は以下の行

    こうすると、childのcreatedでthis.database したときに{{ database.name }}ってそのまま出て儚くも私は散りました。

    2. 子供から親を取得しようとした
    var child = Vue.extend({
    name: 'child-component',
    ...
    created: function() {
        var that = this;
        var databases = that.$parent.databases;
        // で？
    }
});

    で？

    3. なんかエラー出た系

    child側のprops 書かないと

    [Vue warn]: Attribute "v-bind:XXX" is ignored on component  because the component is a fragment instance: http://vuejs.org/guide/components.html#Fragment-Instance

    って怒られて最後の僕が死んだ結果、うまいこといきましたとさ。

    元記事はこちら

    「Vue.jsの入れ子のComponentで {{ Hoge.fuga }} を渡したいだけの人生だった。」