如何使用 vue.js 在数据库中直接更改赞成票和反对票？答案

【问题标题】：How to change upvotes and downvotes directly in databes with vue.js?如何使用 vue.js 在数据库中直接更改赞成票和反对票？
【发布时间】：2017-01-09 15:28:26
【问题描述】：

我正在从数据库中显示我的 cmets：

 @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;
      }
    }

有什么建议吗？

【问题讨论】：

您必须使用 vue-resource 并在 upvotes/downvotes 方法上向服务器发出 post/get 请求
建议构建 Restful API - 使用 Laravel 应该不难。然后您可以向 API 端点发出相应的 HTTP 请求，并通过 API 在您的数据库中进行更新。

标签： laravel laravel-5 laravel-5.2 vue.js

【解决方案1】：

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

【讨论】：