vue.jsでリフレッシュせずに投票を追加するには？

Question

私は投票をしようとすると問題が発生します。なぜなら、私は投票をするためにページを更新する必要があるからです。どのように私の投票をリフレッシュせずに私の視点に見せることができますか？私の見解で は私がコメントをするforeach：ルートで

@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 @click="downvote({{$comment->id}})" :class="{disabled: downvoted}"> 
         {{ $comment->downvotes }} 
         <i class="fa fa-angle-down"></i> 
        </li> 
        <li @click="upvote({{$comment->id}})" :class="{disabled: upvoted}" > 
         {{ $comment->upvotes }} 
         <i class="fa fa-angle-up"></i> 
        </li> 
        <li> 
         <a href="#">REPLY</a> 
        </li> 
        <li> 
         <a href="#">SHARE</a> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 
@endforeach 

私はこれを持っている：vue.jsで

Route::post('/blog/article/comment/upvote', 'StandardUser\UserBlogController@upvote'); 
Route::post('/blog/article/comment/downvote', 'StandardUser\UserBlogController@downvote'); 

私はこの方法を持っている：

methods: { 
    upvote: function (com_id) { 
     var comment_id = { 
      comment_id: com_id 
     } 
     this.$http.post('/blog/article/comment/upvote', comment_id) 
      .then(function (response) { 

      }, function (response) { 

      }); 
    }, 
    downvote: function (comment_id) { 
     this.$http.post('/blog/article/comment/downvote', comment_id) 
      .then(function (response) { 

      }, function (response) { 

      }); 
    }, 
} 

Answer 1

クイック読書を、

vueでは、data（）で定義されているすべてが反応的なので、自動レンダリングと動的バインドがフリーになります。

これは例ですが、あなたのケースに合わせることができます。この上

https://jsfiddle.net/coligo/49gptnad/

​​

より：https://vuejs.org/v2/guide/reactivity.html、ドキュメントをチェックし、エヴァンは、あなたはそれを明確にし、素敵に見えるようにする素晴らしい仕事をしました。