前回までの状況はこちら。
最新ソースはこちら(gitHub)
https://github.com/takishita2nd/diet-mng
データ編集・更新できるようにします。
まず、編集ダイアログのコンポーネントですが、入力のときと別物にしましょう。
同じコンポーネントも使えるかもしれないけど、いろいろめんどくさい。
<template>
<div>
<div id="overlay" v-show="show">
<div id="content">
<p v-if="error_flg == true" class="error">
<ui>
<li v-for="error in errors">{{ error }}</li>
</ui>
</p>
<table class="edit">
<tbody>
<tr>
<td>体重</td>
<td><input type="number" v-model="contents.weight" /></td>
</tr>
<tr>
<td>体脂肪</td>
<td><input type="number" v-model="contents.fat_rate" /></td>
</tr>
<tr>
<td>BMI</td>
<td><input type="number" v-model="contents.bmi" /></td>
</tr>
</tbody>
</table>
<p id="command">
<button @click="clickAdd">入力</button>
<button @click="closeModal">閉じる</button>
</p>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['show'],
data() {
return {
errors: [],
error_flg: [],
param: {},
contents: {
id: "",
weight: "",
fat_rate: "",
bmi: "",
},
};
},
created: function() {
},
methods: {
dataSet: function(data) {
this.contents = data;
},
clickAdd: function() {
var self = this;
this.param.contents = this.contents;
axios.post('api/weight/edit', 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;
});
},
closeModal: function() {
this.$parent.showEditDialogContent = false;
},
clear: function() {
this.contents.weight = "";
this.contents.fat_rate = "";
this.contents.bmi = "";
this.error_flg = false;
this.errors = [];
}
}
}
</script>そして、それを使用する側の親コンポーネント。
<div>
<weight-input-dialog-component :show="showInputDialogContent" @update="invokeUpdateList"></weight-input-dialog-component>
<weight-edit-dialog-component ref="editDialog" :show="showEditDialogContent" @update="invokeUpdateList"></weight-edit-dialog-component>
</div>
onClickEdit: function(id) {
var editData = {};
this.datalists.forEach(element => {
if(element.id == id){
editData.id = id;
editData.weight = element.weight;
editData.fat_rate = element.fat_rate;
editData.bmi = element.bmi;
return true;
}
});
this.$refs.editDialog.dataSet(editData);
this.showEditDialogContent = true;
ポイントは、編集ダイアログにデータを渡すとき。
親コンポーネントから子コンポーネントのメソッドをコールしています。
これは、子コンポーネントを定義するときに、
ref="editDialog"と書くことで、
this.$refs.editDialog.dataSet(editData);
と、子コンポーネントのメソッドを実行できます。
その引数でパラメータを渡して、表示させています。
あとは、今までどおり。
Repository
public function edit($id, $weight, $fat_rate, $bmi)
{
$model = $this->getItemById($id);
$model->weight = $weight;
$model->fat_rate = $fat_rate;
$model->bmi = $bmi;
$model->save();
}
public function getItemById($id)
{
return WeightManagement::where(['id' => $id])->first();
}
controller
/**
* データを１件更新する
*/
public function edit(Request $request)
{
$param = $this->weightManagement->getParam();
$this->weightManagement->edit( $request->contents["id"],
$request->contents["weight"],
$request->contents["fat_rate"],
$request->contents["bmi"]
);
return response()->json();
}
Route::post('api/weight/edit', 'Weight\ApiController@edit');
