0

Laravelとvueを使ってTODOアプリを作っているのですが、アイコンをクリックした時にDBのdoneというカラムの真偽値を反転させたいのですがどのように実装すればいいのかさっぱりです。(axiosを使って非同期でDBの値をクリックするたびに反転させたい)、またはDBにdoneカラムに真偽値を持たせないでも、doneの真偽値だけvue側で持たせてクリックでイベント発火させる方法でもいいです。
画像の5行目がクリックイベントを仕込んであります。クリックイベントのメソッドはまだ書いてません。
1枚目のTODOのタスクのように左側のサークルをクリックしたらチェックのついたサークルになりその要素の色が変わる、またクリックしたら元に戻るという風にしたいです。画像のものはvueのみで作ったTODOですがこれをLaravelを含めてやるとタスクのタイトルやIDはDBに登録してVueで表示してるのですが、完了のステータスをVue側で管理するのかDBで管理するのか、そしてそれの実装の仕方がわかりませんので、どなたかご教授いただきたいです。
タスク表示のVueコンポーネント
vueで作ったTODO

1 件の回答 1

2

最初に言いたいのは、SSではなく、コードを書いた方がいいと思います。そして、SSにはtemplateの中身しかみられません。例えばtoggleDone() methodの中で何が起こっているか確認したいのですが、これでもやりたいことを想像して、サンプルとして、何か書きましょうか。

チェックバックス使いたくないようですので、v-modelなしの方法を考えましょう。

template  

  

@click="toggleDone(todo.id, todo.done)">

クリックする時にparamとしてIDも送りましょう。

script

methods: {
    toggleDone(id, done){
        let new_done = done == true ? false : true
        let payload = {
            "id": id,
            "done": new_done,
        }
        axios.post("your/endpoint", payload).then(response => {
           console.log(response.data)
        })
    }
},

PS: axiosをインポートするの忘れないでください。

上記はフロントエンドです。今からバックエンドについてです。

routes/api

Route::post("your/endpoint", "TodoController@update");

controller

public function update(Request $request)
{

    // done は DBテーブルにある列の名
    $payload = [
        "done" => $request->get("done"),
    ];

    // TodoはDBテーブルの名
    Todo::where("id", $request->get("id"))->update($payload);
    
    $todos = Todo::all()        
     
    return response()->json($todos)

}

ここで気を付けないといけないところはModelです。もしモデルはに $fillable の箇所を決めてないなら、updateができません。

Todo Model

namespace App;

use Illuminate\Database\Eloquent\Model;

class Todo extends Model
{
    protected $guarded = [];
    protected $table = "todo";
    
}

修正したい箇所を $fillable として一つ一つ決めるより 私は $guardedを使いました。この方が早いです。

update, create などの eloquent ORM methodsを調べる為にララベルのDOCSを確認してください。

私は外国人だし、もし日本語が間違えていたらすみません。

1
  • 初めての投稿で分かりづらい投稿になってしまい申し訳ありません。 それにも関わらずご丁寧に教えていただきありがとうございました、お陰様で希望通りの機能を実装することが出来ました。 日本語とてもお上手ですよ!
    – ホクロ
    Commented 2020年6月26日 13:01

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。