Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

前提

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

結論

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

var parent = Vue.extend({
    name: 'parent-component',
    template:
        '<li v-for="database in databases">' +
            '<child-component v-bind:database="database.name"></child-component>' +
        '</ul>'
    ,
    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: 
      '<li v-for="table in tables">' +
          '<a href="#">{{ table.name }}</a>' +
      '</li>',
    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:
        '<li v-for="database in databases">' +
            '<child-component database="{{ database.name }}"></child-component>' +
        '</ul>'
    ,
    ...
});

変更点は以下の行

<child-component database="{{ database.name }}"></child-component>

こうすると、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 <xxx-xxx> because the component is a fragment instance: http://vuejs.org/guide/components.html#Fragment-Instance

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away