How to remove the html element using $http.delete in VueJS

Question

I use $http.delete in a VueJS project to remove the users from a page. When I click on delete icon the user is delete it from the database but on the front end the html for that user is still on page. Will disappear if I refresh the page.

This whole HTML(down) is a user from a list of users, from a database. I tried wrapping the whole HTML with another div and use inside a v-if directive, but in this case will not show me any user.

So how can I remove the html element too, when I delete the user, without refreshing the page?

If there is another way to delete a user from database, beside this $http.delete, fell free to show it to me.

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

Stephan-v · Accepted Answer · 2017-09-01 08:17:13Z

1

Set a v-if on the element that you want to have removed.

In your data you can have an attribute like; userIsActive or something which defaults to true. If your ajax call is a success you can set it to false which will make the element disappear with the v-if.

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

Of course there are dozens of variations on how to do this but this might help you out.

answered Sep 1, 2017 at 8:17

Stephan-v

20.5k32 gold badges125 silver badges213 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user6385799 Over a year ago

and the v-if to be like ``` <app-user v-for="user in users" :user="user" :key="user.index" v-if="user"></app-user>``` or you mean ``` <app-user v-for="user in users" :user="user" :key="user.index" v-if="userIsActive"></app-user>``` ?

Stephan-v Over a year ago

The v-if should respond to the userIsActive since that is the state you are updating in your ajax call. You are giving me an entirely different example than your opening post though so my advice might differ based on what your entire code looks like.

user6385799 Over a year ago

and where in my data to set it to true? The above HTML is a component, a separate page that comes from users page using the <app-user v-for="user in users" :user="user" :key="user.index">

Stephan-v Over a year ago

If your user pages are being generated based off an array of users, you should simply remove the user from the array is the ajax call is successful. You can use splice for this.

user6385799 Over a year ago

thank you Stepahan. I had to wait for the backend to make deploy to test it :).

pankaj · Accepted Answer · 2019-03-12 11:04:34Z

0

you can use v-html for remove html text and only show text..

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

answered Mar 12, 2019 at 11:04

pankaj

1,97026 silver badges37 bronze badges

Collectives™ on Stack Overflow

How to remove the html element using $http.delete in VueJS

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related