Like/Up Vue Button with Vue.Js，axios And Laravel

我想爲我的網站上使用Vue的食譜頁面創建一個像按鈕。我是vue的一個begginer，並將它與laravel相結合，所以我無法在這裏找到問題。關於我在做什麼的幾件事。Like/Up Vue Button with Vue.Js，axios And 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}','[email protected]');

這是喜歡的功能：

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

編輯：的我當然必須加上，如每個評論：增量作品fone，和按鈕的disabeling也適用。什麼不起作用的是數據庫表上的persistend和遞增。我在控制檯得到的迴應是這樣的：

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

就是這樣。謝謝您的幫助。

來源

2017-09-15 GabMic

你的問題有點含糊：**什麼是壞**？類似的計數沒有像你預期的那樣增加嗎？或者服務器沒有正確更新表中的相似計數？檢查您的瀏覽器控制檯，請求是否正確發送和接收？當請求承諾得到解決時，您會收到什麼「響應」？ – Terry

如果你不想讓未註冊的用戶能夠用一個'Auth :: check（）'if語句簡單地包裝你的組件。或者使用不同的選項創建另一個組件。 '''我的邏輯是我不認爲一個人會做這樣的事情'''你不想做這個假設。 –

@Terry請看最新的問題。 – GabMic

我已經解決了這個問題。我有一箇中間件（'auth'）阻止請求並響應正確的數據。謝謝大家。 :)

來源

2017-09-16 22:04:45 GabMic

的錯誤是在你的Laravel模型代碼

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

你忘了打電話給save()，以確保更新後的值被髮布到數據庫。我也將它從接收值改爲增加值，以防止碰撞和覆蓋問題。

來源

2017-09-15 21:52:35

嗨，我現在得到這個：'未捕獲TypeError：無法讀取未定義的屬性'id' ' – GabMic

Like/Up Vue Button with Vue.Js，axios And Laravel

回答

相關問題