Vue中的類綁定

我一直在創建一個論壇，用戶可以點擊一個按鈕。Vue中的類綁定

我想要實現的是，當用戶單擊一個按鈕時，我希望該按鈕被着色以顯示用戶已經喜歡像Laracast一樣的註釋。

我該怎麼辦呢？到目前爲止，我

<div class="Media--footer background"> 
     <div class="Media--footer__left"> 
       <button @click="addOrRemoveLikes(comment.id,auth_id)" 
        v-if="auth_id" 
       > 
    <-------------- Here --------------------> 
        <i class="fa fa-thumbs-o-up" :class={'liked': --HERE-- }></i> {{ comment.likes.length }} 
       </button> 
      <div v-else> 
       <button 
        style="border: 0; background:white;" 
        @click="promptLogin=true" 
       > 
       <i class="fa fa-thumbs-o-up"></i> {{ comment.likes.length }} 
       </button> 
      </div> 
     </div> 
     <div class="Media--footer__right" v-for="like in comment.likes"> 
      <a href="/@{{ like.user.name }}">{{ like.user.name }}</a> 
     </div> 
    </div>

正如你可以看到我用的類綁定，我試圖指計算的道具，但我不知道我該怎麼辦它。此外，我傳遞一個AUTH_ID到component.So，好像我需要比較像

liked: function(){ 
return this.auth_id == like.user_id

}

但是，事情是我不能在這個參數傳遞（comment.likes我需要通過「喜歡」循環獲取user_id

對不起，如果我沒有讓自己清楚。任何幫助將不勝感激。提前感謝。

---- -----更新

我加入這個代碼，但沒有運氣......爲什麼不這項工作？

<button @click="addOrRemoveLikes(comment.id,auth_id)" 
        v-if="auth_id" 
       > 
     <i class="fa fa-thumbs-o-up" :class="{'liked': liked(comment.likes)}"></i> {{ comment.likes.length }} 
</button>

Vue的實例

liked:function(likes){ 
     var self = this 
     likes.forEach(function(like){ 
      return self.auth_id == like.user_id 
     }) 
    }

來源

2016-07-29 shigg

您應該使用Vue的獲取和顯示該數據。對於這個問題，Laravel（以及一般的PHP）對前端沒有任何幫助。

因此，Vue應該通過AJAX查詢PHP來找出它應該顯示哪個類，無論用戶是否已經喜歡這個通信。

此時，您可以在用戶單擊按鈕時重用該功能，以便數據自動以相同的邏輯進行刷新。

來源

2016-07-29 08:03:49

我寫了一個簡單的模板。你可以看看。該代碼尚未編譯，所以可能會有一些小錯誤。所有的API都是僞造的。你應該使用你自己的api。

我添加了一些評論。希望它清楚地解釋邏輯，並會幫助你。

<template> 
     <button class="btn btn-default" v-on:click="toggleLike(anyparameters)" v- 
      bind:class="className" ></button> 
    </template> 

    <script> 
     export default { 

      // any parameters passed as props 
      props:['anyparameterpassedasprop'], 

      mounted() { 

       /* 
        when mounted, send request to your backend to check 
        whether the user already liked the comment or not 
        here I am sending a post request 
       */ 
       axios.post('/api/liked').then(response => { 

        // update your liked status based on response data 
        this.liked = response.data.liked; 
      }) 
     }, 
     data(){ 
      return{ 

       // variable used to store the 'like' status 
       liked:false 
      } 
     }, 
     computed: { 

      // here I am using computed attribute, but you can also use 
      // class bind like v-bind:class="[liked?'liked','like']" to 
      // return the corresponding class name 
      className(){ 
       return this.liked ? 'liked' : 'like'; 
      } 
     }, 
     methods:{ 

      // the toggleLike method invoked when the button clicked 
      toggleLike(anyparameters){ 

       /* send the request to server, update the like status 
       here you should apply your own logic 
       based on this.liked variable 
       you can know the request is about to cancel like or add like 
       */ 
       axios.post('/api/answer/like',{'anyparameters':anyparameters}).then(response => { 

        // update like statue based on respone 
        this.liked = response.data.liked; 
       }) 
      } 
     } 
    } 
</script>

來源

2017-06-25 10:47:36

Vue中的類綁定

回答

相關問題