最初に言いたいのは、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]を確認してください。



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


  [1]: https://laravel.com/docs/7.x/eloquent#inserting-and-updating-models