0

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

  1. 我不希望只对注册用户开放喜欢/赞成配方的选项。
  2. 我知道在页面刷新后（使用我现在拥有的代码），同一个人可以再次单击它。我的逻辑是，我不认为一个人会做这样的事情，尤其是我的网站所指的人群，所以我觉得很好。

好吧，这是我到目前为止所做的代码。

 <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;
    }
}

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

    `{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`

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

4

2 回答 2

0

错误在您的 Laravel 模型代码中

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

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

于 2017-09-15T21:52:35.327 回答
0

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

于 2017-09-16T22:04:45.293 回答