Question

我正在使用Laravel和Vue。

似乎ajax调用是落后意义的一步，当我发布评论时它不会显示，然后当我发表另一条评论时，前一条评论显示在屏幕上。

澄清一下，当我发表评论时，它会立即保存在数据库中。

对于删除功能，我需要单击两次删除按钮才能删除屏幕上的注释。但是，当我单击删除按钮一次时，数据将从数据库中删除，但不是消失，直到我再次点击。

我不知道发生了什么事。我一整天都在研究这个问题。请帮助我

感谢您的帮助！

这是Vue实例

new Vue({




el: '#comment',

data: {

    newComment: {
        id:'',
        reply: '',
        user_id:'',
        topic_id:''
    },

    edit: false,

    comments: []

},  

created: function () {
    this.$set('id', id)
    this.$set('topic_id')
},

methods: {

    fetchComment: function (topic_id) {
        this.$http.get('/api/fetch-comments/' + topic_id).then(function (data) {
            this.$set('comments',data['data'])
        })
    },

    showComment: function (id) {
        this.edit = true;
        this.$http.get('/api/comments/' + id, function(data) {
            this.newComment.id = data.id
            this.newComment.reply = data.reply
            this.newComment.topic_id = data.topic_id
            this.newComment.user_id = data.user_id
        })
    },

    editComment: function (id) {
        var comment = this.newComment

        this.newComment = { id:'', reply:'', topic_id:'',user_id:''}

        this.$http.patch('/api/comments/' + id, comment, function (data) {
            console.log(data)
        })

        this.fetchComment(topic_id)

        this.edit = false
    },

    deleteComment: function(id) {
        var ConfirmBox = confirm("削除しますか？")

        if(ConfirmBox) this.$http.delete('/api/comments/' + id)

        this.fetchComment(topic_id)
    },

    addNewComment: function () {
        var comment = this.newComment

        this.newComment = { reply:'',user_id:'',
        topic_id:'' }
        this.$http.post('/api/comments/', comment)
        this.fetchComment(topic_id)


    }


},

computed: {
    validation: function() {
            return {
                reply: !this.newComment.reply.trim()
            }
    }
}, 





ready: function () {
    this.fetchComment(topic_id)
}
});

刀片文件

<script>
  var topic_id = '{{ $topic->id }}';
   var id = '{{ Auth::id() }}';
</script>


<div id="comment">



      <span v-for="comment in comments">

                <p> @{{ comment.reply }}</p>




            <div v-if="id == comment.user_id">
                    <button class="btn btn-success btn-xs" @click="showComment(comment.id)" >edit</button>
                     <button class="btn btn-danger btn-xs" @click="deleteComment(comment.id)">delete</button>
             </div>
        </span> 





<!-- Form -->
     @if(Auth::user())
        <hr style="margin-top:40px;">

        <div class="alert alert-success" v-show="!validation.reply">

            <p>what do u have to say?</p>

        </div>
        <form action="#" @submit.prevent="addNewComment">

            <div class="form-group">

                    <label for="reply"><h3>comment：</h3></label>
                    <textarea v-model="newComment.reply" name="reply" id="reply" cols="30" rows="10" class="form-control"></textarea>

            </div>

            <input v-model="newComment.topic_id" type="hidden" name="topic_id" id="topic_id" value="{{$topic->id}}">
            <input v-model="newComment.user_id"  type="hidden" name="user_id" id="user_id" value="{{Auth::id()}}">


            <div class="form-group">
                <button :disabled="!validation.reply" class="btn btn-primary form-control" type="submit" v-if="!edit">post</button>

                <button :disabled="!validation.reply" class="btn btn-primary form-control" type="submit" v-if="edit" @click="editComment(newComment.id)">edit</button>
            </div>


        </form>
    @endif

路线

Route::get('/api/fetch-comments/{topic_id}', function($topic_id){
    return App\Comment::where(compact('topic_id'))->with('likes')->get();
});

Route::post('/api/comments/', function(){
    return App\Comment::create(Request::all());
});

Route::get('/api/comments/{id}', function($id) {
    return App\Comment::findOrFail($id);
});

Route::patch('/api/comments/{id}', function($id) {
    App\Comment::findOrFail($id)->update(Request::all());

});

Route::delete('/api/comments/{id}', function($id) {
   return App\Comment::destroy($id);

});

Answer 1

问题是你在Vue代码的addNewComment中调用了两个没有回调或承诺的异步函数。这段代码

addNewComment: function () {
    var comment = this.newComment

    this.newComment = { reply:'',user_id:'',
    topic_id:'' }
    this.$http.post('/api/comments/', comment)
    this.fetchComment(topic_id)

应该是这样的

addNewComment: function () {
    var comment = this.newComment

    this.newComment = { reply:'',user_id:'',
    topic_id:'' }
    this.$http.post('/api/comments/', comment).then(function (response) {
        // should your topic_id var be defined here? 
        // that's also a problem if it is undefined
        this.fetchComment(topic_id)
    })

其他方面，我不知道您在$set调用$get方法时使用fetchComment方法的原因，这不是必要的，因为您的注释已在您的Vue实例的数据属性，所以只需使用this.comments = data['data']

Vue.js ajax请求落后一步

1 个答案: