前提
- 非同期通信で親子関係をもったリストをとりたい
- 今回は
DataBase
–Table
みたいな親子関係でDataBaseのnameをキーにTable一覧をとるAPIを叩く想定 - 親(Hoge)のプロパティ(fuga)を子供に受け渡すことのみを命をかけている。
結論
これでうまくいきました。死んだ僕達の願いは後半に書いてます。
var parent = Vue.extend({ name: 'parent-component', template: '
ハマったところ
子コンポーネントへの値の渡し方
あれやこれや試して上記にたどりついた。
数々の死んだ俺たちを以下に残します。
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 componentbecause the component is a fragment instance: http://vuejs.org/guide/components.html#Fragment-Instance
って怒られて最後の僕が死んだ結果、うまいこといきましたとさ。