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

编辑：我当然必须添加，根据评论：增量起作用，按钮的消除也起作用。什么不起作用是DB表上的持久和递增。我在控制台中得到的响应是：

    `{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'）阻止请求并响应正确的数据。谢谢大家。：）

喜欢/ Up Vote Button与Vue.Js，axios和Laravel

2 个答案: