如何在VueJS中使用$ http.delete删除html元素

Posted 2021-04-29

我在VueJS项目中使用$ http.delete从页面中删除用户。当我点击删除图标时，用户将其从数据库中删除，但在前端，该用户的html仍在页面上。如果我刷新页面将会消失。

整个HTML（向下）是来自数据库的用户列表中的用户。我尝试用另一个div包装整个HTML并在v-if指令中使用，但在这种情况下不会向我显示任何用户。

那么当我删除用户时，如何在不刷新页面的情况下删除html元素呢？

如果有另一种方法从数据库中删除用户，除了这个$ http.delete之外，还可以免费向我展示。

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

答案

在要删除的元素上设置v-if。

在您的数据中，您可以拥有类似的属性; userIsActive或默认为true的东西。如果你的ajax调用成功，你可以将它设置为false，这将使元素与v-if一起消失。

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

当然，有很多关于如何做到这一点的变化，但这可能会帮助你。

另一答案

您可以使用v-html删除html文本并仅显示文本..

 <p v-html="items"></p>