前回までの状況はこちら。
最新ソースはこちら(gitHub)
https://github.com/takishita2nd/diet-mng
データ一覧画面からデータ入力を行います。
<template>
<div>
<div>
<p id="navi">> <a href="/home">HOME</a></p>
<p id="inputbutton">
<button @click="onClickInput">データ入力</button>
</p>
<table class="weightlist">
<tbody>
<tr>
<th class="date">日時</th>
<th class="weight">体重(kg)</th>
<th class="fat_rate">体脂肪(%)</th>
<th class="bmi">BMI</th>
<th class="edit"></th>
<th class="delele"></th>
</tr>
<tr v-for="data in datalists">
<td class="date">{{ data.date}}</td>
<td class="weight">{{ data.weight}}</td>
<td class="fat_rate">{{ data.fat_rate}}</td>
<td class="bmi">{{ data.bmi}}</td>
<td class="edit"><a href="">Edit</a></td>
<td class="delele"><a href="">Delete</a></td>
</tr>
</tbody>
</table>
</div>
<div>
<weight-input-dialog-component :show="showDialogContent" @update="invokeUpdateList"></weight-input-dialog-component>
</div>
</div>
</template>
入力ダイアログ画面は、すでに作成してあるコンポーネントを流用します。
しかし、この一覧画面から入力した場合は、入力後、リストを更新する必要があります。
なので、入力ダイアログコンポーネントから親コンポーネントで信号を送って、リスト更新処理を走らせるようにします。
入力処理はこんな感じ。
clickAdd: function() {
var self = this;
this.param.contents = this.contents;
axios.post('api/weight/add', this.param).then(function(response){
self.clear();
self.closeModal();
self.$emit('update');
}).catch(function(error){
self.error_flg = true;
self.errors = error.response.data.errors;
});
},
ポイントは、親側（データ一覧画面）側で
<weight-input-dialog-component :show="showDialogContent" @update="invokeUpdateList"></weight-input-dialog-component>の@update=”invokeUpdateList”の部分。
これがある状態で、子コンポーネントから
this.$emit('update');を実行すると、親コンポーネントのinvokeUpdateList()メソッドが実行されます。
created: function() {
this.updateList();
},
methods: {
onClickInput: function() {
this.showDialogContent = true;
},
invokeUpdateList: function() {
this.updateList();
},
updateList: function() {
this.datalists = [];
var self = this;
axios.post('api/weight/list').then(function(response){
response.data.dataLists.forEach(element => {
self.datalists.push({
date: element.datetime,
weight: element.weight,
fat_rate: element.fat_rate,
bmi: element.bmi
})
});
}).catch(function(error){
});
}
}こんな感じで更新処理を行えばOK。
ちなみに、ダッシュボード画面(:@updateの記載がない)に対して$emit(‘update’)を行っても特にエラーにはなりませんでした。
子コンポーネント定義に書かなければ、emitしても何事もなく動くみたいです。
