Question

我在数据库中推迟发表评论：

 @foreach($comments as $comment)
               <div class="comment_list">
                 <div class="row">
                   <div class="col-md-1 col-sm-1 col-xs-1">
                     <div class="user_profile_image {{ isset($comment->user->personal_user) ? 'bg_blue' : 'bg_green'}}">
                       @if(isset($comment->user->avatar) && $comment->user->avatar != '')
                         <div class="profile-image"><img src="{{ avatar_path($comment->user->avatar) }}" alt="" /></div>
                       @else
                           <div class="profile-image {{ isset($comment->user->personal_user) ? 'bg_blue' : 'bg_green' }}"><img src="{{ home_asset('img/user_icon.png') }}" alt="" /></div>
                       @endif
                     </div>
                   </div>
                   <div class="col-md-11 col-sm-11 col-xs-11">
                     <div class="comments">
                       <div class="post"><span class="post_name">{{ isset($comment->user->personal_user) ? $comment->user->personal_user->first_name .' '.$comment->user->personal_user->last_name : $comment->user->business_user->company_name  }}</span><span class="post_date"> -  {{ \Carbon\Carbon::createFromTimeStamp(strtotime($comment->created_at))->diffForHumans() }}
                       </span></div>
                       <p>{{ $comment->comment }}</p>

                     </div>
                     <ul class="comment_buttons">
                       <li>{{ $comment->downvotes }} <i class="fa fa-angle-down" @click="downvote" :class="{disabled: downvoted}"></i></li>
                       <li>{{ $comment->upvotes }} <i class="fa fa-angle-up" @click="upvote" :class="{disabled: upvoted}"></i></li>
                       <li><a href="#">REPLY</a></li>
                       <li><a href="#">SHARE</a></li>
                     </ul>
                   </div>
                 </div>
               </div>
             @endforeach

我想要的是当用户点击upvote或downvote更改其值并将其保存到数据库时。在vue.js中我有这样的方法：

  methods: {
    upvote: function() {
      this.upvoted = !this.upvoted;
      this.downvoted = false;
    },
    downvote: function() {
      this.downvoted = !this.downvoted;
      this.upvoted = false;
    }
  },
  computed: {
    upvotes: function() {

      if (this.upvoted) {
        return this.post.upvotes + 1;
      }
      else {
        return this.post.upvotes;
      }

    },
    downvotes: function(){
      if(this.downvoted){
        return this.post.downvotes -1;
      }
      else{
        return this.post.downvotes;
      }
    }

有任何建议我该怎么做？

Answer 1

VueJS是前端框架，因此您无法使用它来操纵数据库。
使用操作创建2条路线，例如/api/vote/up/{id}和/api/vote/down/{id}
在您的组件中，您需要一些id项目（文章，评论等？） 4.使用例如Axios创建像'Vue.axios.get（'/ api / vote / down /'+ this.objectID）这样的getrequests。
利用Laravel处理上/下投票

如何使用vue.js直接在databes中更改upvotes和downvotes？

1 个答案: