Skip to main content
本文から 36 文字削除
ソース リンク

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

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

これでチェックされているかどうかの確認をできます。そして、クリッククリックする時にparamとしてID送りましょう。

public function update(Request $request)
{

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

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

}

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

これでチェックされているかどうかの確認をできます。そして、クリックする時にparamとしてID送りましょう。

public function update(Request $request)
{

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

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

}

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

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

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)

}
ソース リンク

最初に言いたいのは、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_status"),
    ];

    // 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を確認してください。

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