Like/Up 使用 Vue.Js、axios 和 Laravel 投票按钮

Question

我正在尝试使用 Vue 为我网站上的食谱页面创建一个点赞按钮。我是 vue 的初学者，并将它与 laravel 相结合，所以我找不到这里的问题。关于我正在做的事情，有几点需要注意。

我不希望只对注册用户开放对菜谱点赞/投票的选项。
我知道在页面刷新后（使用我现在拥有的代码），同一个人可以再次点击它。我的逻辑是，我不认为一个人会做这样的事情，尤其是我的网站所指的人群，所以我觉得没问题。

好吧，这是我到目前为止完成的代码。

 <like :recipe="{{$recipe}}" inline-template>
    <div>
       <button class="button is-medium" @click="iLikeIt":disabled="disabled" >Like</button>
       <button class="button is-medium fa fa-thumbs-up"  v-text="like"></button>
    </div>
 </like>

这是脚本：

<script>
    export default{
        props:['recipe'],

        data(){
            return{
            like:0,
            disabled:false
            }
        },

        methods:{
            iLikeIt(){
                   this.like++;
                   this.disabled=true;
                    axios.post('/likes/'+this.recipe.id, {
                        likes: this.like,
                        id:this.recipe.id
                    })
                    .then(function (response) {
                        console.log(response);
                    });
            }
        }

    }
</script>

路线如下：

Route::post('/likes/{id}','RecipesController@likes');

这是点赞功能：

public function likes(Request $request,$id){
 if (request()->expectsJson()) {
    $recipe=Recipe::find($id);
    $recipe->likes=$request->likes;
       return $recipe;
    }
}

编辑：根据评论，我当然必须添加：增量有效，按钮的禁用也有效。不起作用的是数据库上的持久化和递增 table。我在控制台中得到的响应是这样的：

    `{data: " status: 200, statusText: "OK", headers: {…},

    ƒ xhrAdapter(config)
    data
    :
    "{"likes":1,"id":117}"

    method
    :
    "post"

    "/likes/117"

    request
    :
    XMLHttpRequest
 {readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload}
    status
    :
    200
    statusText
    :
    "OK"
    __proto__
    :
    Object`

就是这样。感谢您的帮助。

Answer 1

错误在您的 Laravel 型号代码中

public function likes($id){
    if (request()->expectsJson()) {
        $recipe = Recipe::find($id);
        $recipe->likes++;
        $recipe->save();
        return $recipe;
    }
}

您忘记调用 save() 来确保将更新的值推送到数据库。我还将它从接收值更改为在调用时递增，因为这样可以防止冲突和覆盖问题。

Answer 2

我已经解决了问题。我有一个中间件（'auth'）阻止请求和响应正确的数据。谢谢大家。 :)

Like/Up 使用 Vue.Js、axios 和 Laravel 投票按钮

Like/Up Vote Button With Vue.Js, axios And Laravel

laravel

vue.js

vuejs2

axios

laravel-5.5