VueJSで$ http.deleteを使用してhtml要素を削除する方法

Question

VueJSプロジェクトで$ http.deleteを使用してページからユーザーを削除します。削除アイコンをクリックすると、データベースから削除されますが、フロントエンドでそのユーザーのhtmlはまだページ上にあります。ページを更新すると消えます。

この全体のHTML（ダウン）は、データベースのユーザー一覧に含まれるユーザーです。私は、HTML全体を別のdivでラップして、v-if指令の中で使用しようとしましたが、この場合、私には何のユーザも表示されません。

ページを更新せずにユーザーを削除すると、html要素も削除できますか？

データベースからユーザーを削除する別の方法がある場合は、この$ http.deleteの横に、私にそれを見せてもらってください。あなたが削除したい要素にv-ifを設定

HTML

<template> 
    <div> 
    <div class="card visitor-wrapper"> 
     <div class="row"> 
     <div class="col-md-2"> 
      <div class="checkbox checkbox-success"> 
      <input type="checkbox" id="select-1"> 
      <label for="select-1" style="width: 50px;"><img src="../../assets/icons/visitors-icon.svg" alt=""></label> 
      </div> 
      <i class="fa fa-user-o fa-2x" aria-hidden="true"></i> 
     </div> 
     <div class="col-md-3"> 
      <p class="visitor-name">{{user.firstName}}</p> 
      <span class="visitor-email">{{user.userType}}</span> 
     </div> 
     <div class="col-md-2"> 
      <p class="visitor-other-detail">{{user.rid}}</p> 
     </div> 
     <div class="col-md-2"> 
      <p class="visitor-other-detail">{{user.departmentId}}</p> 
     </div> 
     <div class="col-md-2"> 
      <p class="visitor-other-detail">{{createdDate(user.createdDate)}}</p> 
     </div> 
     <div class="col-md-1 divider-left"> 
      <div class="edit-icon"> 
      <router-link :to="'/users/edit-user/'+user.rid"><a data-toggle="tooltip" data-placement="top" title="Edit Employee"><i class="ti-pencil-alt" aria-hidden="true"></i></a></router-link> 
      </div> 
      <div class="trash-icon"> 
      <a data-toggle="tooltip" data-placement="top" title="Delete Employee" @click="removeUser(user.rid)"><i class="ti-trash" aria-hidden="true"></i></a> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</template> 

JS

export default { 
    props: ['user'], 
    methods: { 
    removeUser(item) { 
     this.$http.delete('/user/' + item) 
     .then((response) => { 
     console.log('response', response); 
     }); 
    } 
    } 
} 

Answer 1

。

データには、次のような属性を設定できます。 userIsActiveまたはデフォルト値がtrueのもの。あなたのajax呼び出しが成功した場合は、それをfalseに設定すると、要素がv-ifで消えるようになります。

removeUser(item) { 
    this.$http.delete('/user/' + item) 
     .then((response) => { 
     this.userIsActive = false; 
     console.log('response', response); 
     }); 
} 

もちろん、これを行う方法には数多くのバリエーションがありますが、これはあなたを助けるかもしれません。