Home>

vue.js : I want to reverse each time you click on DB value asynchronously using AXIOS

I'm making a TODO app using Laravel and Vue, but I want to invert the true palm value of DB DONE when I click an icon, but how it should be implemented how to implement . (I want to invert each time you click AxIOS to invert each time you click DB value) or not, even if you do not have a mustoptone value in the DONE column, you can only have a true or false value of DONE and click on the event. It may be a way to ignite.
The fifth line of the image is packed with click events. The click event method is not writing yet.
When you click the circle on the left as with the first TODO task, it will be a checked circle and the color of that element changes, and if you click to return to the original. The image of the image is a TODO made with only VUE, but if you include LarAvel, the task title or ID is registered in DB and displayed in VUE, but is it managed on the VUE side? I do not know how to manage it with DB, and I would like to teach anyone.

vue.js laravel-5 axios
  • Answer # 1

    I think that you want to write a code instead of SS. And SS can only be the contents of Template. For exampleToggleDone ()I would like to see what happens in Method, but imagine what I want to do, and write something as a sample?

    Checkback Box does not want to use it, so consider the method without V-model.

    Template 

    @ click= "Toggledone (Todo.id, Todo.done)" >


    Let's also send ID as PARAM when clicking.
    

    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: Remember to import AXIOS.
    

    The above is a front end. About the back end from now.
    

    Routes /API 
    

    ROUTE :: POST ("YOUR /ENDPOINT", "TODOCONTROLLER @ UPDATE");


    CONTROLLER 
    

    Public Function Update (Request $ Request)
{
    //DONE is the name of the column in the DB table
    $ Payload= [
        "DONE"= >
 $ Request->
GET ("DONE"),
    ];
    //TODO is the name of the DB table
    TODO :: WHERE ("ID", $ Request->
get ("id")) ->
UPDATE ($ PAYLOAD);
    $ TODOS= TODO :: ALL ()
    Return Response ()->
JSON ($ TODOS)
}


    It is a model that you have to be careful here. If the model has not decides the part of $ fillable, UPDATE can not be done.
    

    TODO MODEL 
    

    NAMESPACE APP;
Use Illuminate \ Database \ Elquent \ Model;
Class Todo Extends Model
{
    Protected $ Guarded= [];
    Protected $ TABLE= "TODO";
}


    I used $ Guarded than I decided to fix the place where I want to fix it as $ fillable. This is early.
    

    UPDATE,CREATEPlease check to examine Eloquent ORM Methods such as.
    

    I'm a foreigner and I'm sorry if Japanese is wrong.
    

    I'm sorry I'm a part of my first post. Nevertheless, thank you very much for teaching me carefully, I was able to implement the desired function as evidence. Japanese is very good!
    ホクロ2021-04-07 02:18:34