Vue.js ajaxが一歩遅れて依頼する

Question

私はLaravelとVueを使用しています。

私はコメントを投稿すると表示されず、別のコメントを作成すると、前のものが画面に表示されるという意味の裏にある一歩です。

コメントを投稿すると、すぐにデータベースに保存されます。

削除機能の場合、画面からコメントを削除するには、削除ボタンを2回クリックする必要があります。削除ボタンを1回クリックするとデータがデータベースから削除されますが、消えませんもう一度クリックするまで

happening.Iはこれに取り組んできたいただきました！私は知らない全体day.PLeaseは、あなたの助けの人たちのための

おかげで私を助けて！ここで

は、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

問題は、あなたがcallbaせずに2つの非同期関数を呼び出しているということですあなたのVueコードでaddNewCommentのcksまたは約束をしてください。コード

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

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

のこの作品は、私はそれが必須ではありません、あなたはfetchComment法に$get呼び出しで$set方法を使用している理由は分からない、この

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) 
    }) 

他の事のようにする必要がありますあなたのコメントはすでにVueインスタンスのデータ属性で定義されているので、最初の削除をクリックしたときにajaxレスポンスを確認しましたか？this.comments = data['data']