

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


CC BY-SA 4.0
2020-06-25T13:00:04.017
67991
2021-04-04T00:52:07.377
2021-04-04T00:52:07.377
32986
40824
question
vue.js laravel-5 非同期 axios
axiosを使って非同期でDBの値をクリックするたびに反転させたい


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

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

**template**

[code]

    @click="toggleDone(todo.id, todo.done)">
    
[/code]

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

**script**

[code]

    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)
            })
        }
    },
    
[/code]

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

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

**routes/api**

[code]

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

**controller**

[code]

    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)
    
    }
    
[/code]

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

**Todo Model**

[code]

    namespace App;
    
    use Illuminate\Database\Eloquent\Model;
    
    class Todo extends Model
    {
        protected $guarded = [];
        protected $table = "todo";
        
    }
    
[/code]

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

`update`, `create` などの eloquent ORM
methodsを調べる為に[ララベルのDOCS](https://laravel.com/docs/7.x/eloquent#inserting-and-
updating-models)を確認してください。

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


CC BY-SA 4.0
2020-06-25T14:23:11.423
67993
2020-06-25T14:28:44.050
2020-06-25T14:28:44.050
30379
30379
67991
answer