Deleting an item in Vue.js with the removal feature

Question

Deleting an item in Vue.js with the removal feature

After deleting items from my list, they remain visible until I manually refresh the page. How can I fix this issue?

List

<tbody>
    <tr v-for="school in schools" v-bind:key="school.id">
        <td>{{ school.id }}</td>
        <td>{{ school.name }}</td>
        <td>
            <button
            class="btn btn-danger"
            v-on:click="deleteSchool(school.id)">
            Delete
            </button>
        </td>
    </tr>
</tbody>

Delete method

deleteSchool(id)
{
  let uri = `http://localhost/schools/${id}`;
  this.axios.delete(uri);
  this.schools.splice(id, 1);
}

Looking for solutions!

javascript laravel vue.js

Answer 1

Answer №1

utilize the index as a key to remove an item from the list

<tbody>
    <tr v-for="(school,index) in schools" v-bind:key="school.id">
        <td>{{ school.id }}</td>
        <td>{{ school.name }}</td>
        <td>
            <button
            class="btn btn-danger"
            v-on:click="deleteSchool(school.id,index)">
            Delete
            </button>
        </td>
    </tr>
</tbody>

deleteSchool(id,index)
{
  let uri = `http://localhost/schools/${id}`;
  this.axios.delete(uri);
  this.schools.splice(index, 1);
}

Answer 2

utilize the index as a key to remove an item from the list

<tbody>
    <tr v-for="(school,index) in schools" v-bind:key="school.id">
        <td>{{ school.id }}</td>
        <td>{{ school.name }}</td>
        <td>
            <button
            class="btn btn-danger"
            v-on:click="deleteSchool(school.id,index)">
            Delete
            </button>
        </td>
    </tr>
</tbody>

deleteSchool(id,index)
{
  let uri = `http://localhost/schools/${id}`;
  this.axios.delete(uri);
  this.schools.splice(index, 1);
}

Answer 3

Answer №2

In the realm of ES6, this task can also be accomplished using findIndex().

<tbody>
  <tr v-for="school in schools" :key="school.id">
    <td>{{ school.id }}</td>
    <td>{{ school.name }}</td>
    <td>
      <button
        class="btn btn-danger"
        @click="deleteSchool(school.id)">
        Delete
      </button>
    </td>
  </tr>
</tbody>

methods: {
  deleteSchool(id) {
    const uri = `http://localhost/schools/${id}`;

    this.axios.delete(uri);

    const schoolIndex = this.schools.findIndex(school => school.id === id);

    this.schools.splice(schoolIndex, 1);
  }
}

Answer 4

In the realm of ES6, this task can also be accomplished using findIndex().

<tbody>
  <tr v-for="school in schools" :key="school.id">
    <td>{{ school.id }}</td>
    <td>{{ school.name }}</td>
    <td>
      <button
        class="btn btn-danger"
        @click="deleteSchool(school.id)">
        Delete
      </button>
    </td>
  </tr>
</tbody>

methods: {
  deleteSchool(id) {
    const uri = `http://localhost/schools/${id}`;

    this.axios.delete(uri);

    const schoolIndex = this.schools.findIndex(school => school.id === id);

    this.schools.splice(schoolIndex, 1);
  }
}

Deleting an item in Vue.js with the removal feature

Answer №1

Answer №2

Similar questions

Tips on getting the most out of your watch

Bazel: Utilizing the nodeJS_binary rule for executing "npm run start" - A Guide

What causes the Woocommerce checkout button to be blocked on the checkout page?

How to show a div for small screens only using Bootstrap 4 beta?

What could be causing the Express server to return an error despite everything being in order?

A guide to retrieve data attributes in Vue.js

What causes the disparity in the functionality of getServerSideProps between index.js and [id].js in NextJS?

Get a single object from an array with .single method provided by @ngrx

Highlighting JavaScript code with React Syntax Highlighter exclusively

Automatic playback of the next video in a video slider

Tips to prevent browser from freezing while creating a large number of HTML elements

Endless scrolling with Laravel and Vue fails to load data due to request not being sent

Tips on retrieving the status code from a jQuery AJAX request

Execute a JavaScript function daily for each new user

React is generating an error when attempting to use hooks without the appropriate class name prefix

Avoid the occurrence of the parent's event on the child node

Difficulty encountered while using CSS to customize a vue template

Feeling trapped during the process of setting up a intricate jQuery Image Slider

What is the process for creating a versatile component in Vue that can be specialized for specific models?

Is there a way to replicate the functionality of $(document).ready for dynamically loaded AJAX content?