Posted at

vue.jsで子コンポーネントで受け取った値を更新するときはpropsで受け取ってdataで名前を変更して使う。


  • カスタムタグからv-bindで子コンポーネントに「items」という名前でデータを渡す。

  • 子コンポーネントのpropsで「items」を受け取る。

  • 子コンポーネントのdataで「lists」にpropsの「items」をセットする。

  • propsとdataで同じ名前で定義できない。ワーニングになる。

  • 名前を変更してdataとして扱わないと後から更新しても反映されない。一覧データに新規追加した場合などで困る。

https://jp.vuejs.org/v2/guide/components-props.html#単方向のデータフロー


blade.php

@section('content')

<list-component :items='{!! json_encode($lists)!!}'></parent-component>
@endsection


ListComponent.vue

<template>

<div>
<child-component
v-for="hoge in lists"
v-bind:key="hoge.id"
v-bind:hoge="hoge">
</child-component>
<button v-on:click="add()">新規追加</button>
</div>
</template>

<script>
import ChildComponent from './ChildComponent'

export default {
components: {
ChildComponent
},
props: ['items'],
data: function () {
return {
lists: this.items// ローカル用に差し替えて使う。
};
},
methods: {
add: function () {
console.log('新規追加');
this.sites.push({
id: 1,
name: ''
});
}
}
}
}
</script>