share facebook facebook twitter menu hatena pocket slack

2016.07.25 MON

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

高橋 慎一

WRITTEN BY 高橋 慎一

前提

  • 非同期通信で親子関係をもったリストをとりたい
  • 今回は DataBaseTable みたいな親子関係で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 }} を渡したいだけの人生だった。