Vueでのクラスバインディング

Question

私はユーザーが好きなボタンをクリックできるフォーラムを作成しています。

私が達成しようとしているのは、ユーザーがボタンをクリックしたときに、そのボタンが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> 

を得たが、私は私が行うことができますどのように確認していない今のところ？それを行うことができますどのようにそれ。また、私は、component.SoにAUTH_IDを私は

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

Answer 1

あなたは、このデータを取得し、表示するためのVueを使用する必要があります。 Laravel（と一般にPHP）は、この問題のフロントエンドには役に立たないでしょう。

したがって、VueはAJAXを介してPHPに照会して、表示するクラスを見つけて、ユーザーが既にそのcommntを気に入っているかどうかを調べる必要があります。

この時点で、ユーザーがボタンをクリックしたときにその関数を再利用できるため、データは同じロジックで自動的にリフレッシュされます。

Answer 2

私はシンプルなテンプレートを書いています。あなたは一見を持つことができます。コードはまだコンパイルされていないので、いくつかの小さなバグがあるかもしれません。すべての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>