【アレンジ挑戦】Laravel+Vue.jsでのDB連携【備忘録】

はじめに

前回でAxiosの実装は終えましたが、追加アレンジに挑戦してみました。

※前回の内容

【Axiosの実装】Laravel+Vue.jsでのDB連携【超ミニマムチュートリアル】

アレンジ

Vue.Draggableの実装

注意
移動後の状態を保持するための実装方法がわからず未解決。以下は備忘録です。

※以前実装した際の記録。

【Vue.js】ドラッグ&ドロップができる「Vue.Draggable」を使ってみた

移動の実装は簡単でした。

<draggable>
  <div v-for="todo in todos">
    <input type="text" v-model="todo.todo" />
    <button type="button" @click="deleteTodo(todo.id)">削除</button>
    <button type="button" @click="updateTodo(todo.id)">更新</button>
  </div>
</draggable>
ちょび
draggableがv-forタグ内に入らないのでそれぞれのtodo.idをdraggable@endイベントの引数として取得することはできない。移動後の状態を保持するための実装(更新)が容易ではないことに気付きました。。。

アプローチ①※備忘録

エンドイベントを追記

<draggable @end="change(move_id)">
算出プロパティを追記
computed:{
  move_id(){
    return this.todos[0].id // 現状のデータから最後のidを取得 仮に26とする
  }

メソッドを定義

change(id) { //ここの引数にmove_idの値が入る 26
  var data = {todo:'move todo'};
  axios.put("/api/"+ id, data).then(() => { // idは26
    this.getTodoList();
    alert('DBへの更新実装はまだできていません。')
  });
},
ちょび
これでidが26のtodoカラムの値がmove todoに変更されることは確認
ちょび
特定のidを取得して間に入れ込んだりしながらidを変更する方法がわからない。。。非常に難しそう。。。

アプローチ②※備忘録

v-bindを含んだdivタグを追記。

<div v-for="todo in todos">
  <div :value="todo.id">
    <input type="text" v-model="todo.todo" />
    <button type="button" @click="deleteTodo(todo.id)">削除</button>
    <button type="button" @click="updateTodo(todo.id)">更新</button>
  </div>
</div>

以下のようにtodoテーブルのidがそれぞれの値に代入されていることを確認。

この値を活かしたいけどこれまたdraggableタグ内で取得する方法がわからず。

そもそものVue.draggableの仕組み理解が必要そう。どうやって移動後のデータを保存しているんだろう。。。

配列の先頭に要素を追加する array.unshift()メソッドとか利用するのかな??

モデルを弄ってみる。

・全レコード取得

$todos = Todo::all(); // 現状の記載

・検索して複数のレコードを得る(※値は完全一致)

$todo = Todo::where('todo','test3')->get();

・最初のレコードだけ得る

$todo = Todo::where('todo','test3')->first();
注意
ビュー側ではなぜか表示できませんでした。 1つだけのオブジェクトならv-forを使う意味がないにも関わらず、v-forの記述をしているからかも。

・データの追加

$todo = new Todo(); // モデルインスタンスの作成
$todo->todo = $request->todo; // 左辺でTodoインスタンスのtodoカラムを指定。リクエストデータからtodoを取得。
$todo->save(); // セーブ

・データの更新

$todo = Todo::find($id); // findメソッドでIDによるレコード検索ができる。
$todo->todo = $request->todo;
$todo->save();

・データの削除

Todo::find($id)->delete();
ちょび
登録も更新もsaveを使うっていうのがミソな気がします。

・データの並び替え

$todo = Todo::orderBy('id','desc')->get(); // 降順で取得

※DBクラスを使ったパターン

use Illuminate\Support\Facades\DB; //DBクラスの利用
$todo = Todo::table('todos')->orderBy('id','desc')->get(); // 利用したいアクション内に記載

idを更新できるか※失敗

PUT送信時にidも一緒に更新できるのか試してみました。

コンポーネント側

updateTodo(id) {
  var data = {
    todo:this.todos.filter(function(value){return value.id === id})[0].todo,
    id:5
  };
  axios.put("/api/" + id, data).then(() => {
    this.getTodoList();
    alert('更新が完了しました。')
  });
},

コントローラ側

Route::post('/',function(Request $request){
    $todo = new Todo();
    $todo->todo = $request->todo;
    $todo->id = $request->id;
    $todo->save();
    return response("OK", 200);
});

これでidを5に編集できると思ったのですが、できませんでした。

並び替え用のedit_idみたいなカラムを作るべきなのかなと思いました。

おわりに

Vue.Draggableの実装が非常に難しいことがわかりました。。。

配列の中のオブジェクト、特定の値を取得したい際は繰り返し処理がマストっぽい。

{{ todos[].todo }}

上記みたいな書き方で全件取得できるはずもなかった。

参考

昇順(ASC)と降順(DESC)の覚え方は階段をイメージしてみては?

Laravel で アイテムをゲットするときに指定した順番でソートしたい

Laravelでテストデータを用意し、ペジネーションと並び替えを実装

JavaScriptの配列 ( array ) を理解する

コメントを残す