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

在路线中我有这个：

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

在vue.js中我有这样的方法：

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/

if (! l->first) {
    l->first = item;
} else {
    unsigned int i;
    list_item *last = l->first;
    for (i = 0; i < l->len-1; i++) {
        last = last->next;
    }
    last->next = item;
}

更多相关信息：https://vuejs.org/v2/guide/reactivity.html，查看文档，Evan You做了一项非常棒的工作，让它看起来清晰而美观。

如何使用vue.js添加投票而不刷新？

1 个答案: