class binding in 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> 

Как вы можете видеть, я использую привязки класса, и я пытаюсь обратиться к расчетному реквизита, но я не знаю, как я могу сделать Это. Кроме того, я пропускании 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> 

экземпляр Вью

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

Answer 1

Вы должны использовать Vue, чтобы получить и отобразить эти данные. Laravel (и PHP в целом) для этой проблемы не поможет в интерфейсе.

Итак, Vue должен запросить PHP через AJAX, чтобы узнать, какой класс он должен отображать, независимо от того, понравился пользователь или нет.

На этом этапе вы можете повторно использовать эту функцию, когда пользователь нажимает кнопку, чтобы данные автоматически обновлялись с использованием той же логики.

Answer 2

Я написал простой шаблон. Вы можете посмотреть. Код еще не скомпилирован, поэтому могут быть некоторые крошечные ошибки. Вся апа подделана. Вы должны применить свой собственный 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>