I want handle the delete function by vuejs-CodePudding

This is my Indexing.vue component.

<div>
  <div v-for="data in indexingList" :key="data.indexing_id">
    <p>{{ data.indexing_name }}</p>
    <p>{{ data.indexing_url }}</p>
  </div>
  <base-button type="primary" size="sm" @click="deleteIndexing(data.indexing_id)">Delete
  </base-button>
</div>

export default {
  data() {
    return {
      indexingList: [],
    }
  },
  methods: {
    getIndexingList: function() {
      this.api.getDataModule("indexing/"   store.state.journalId, "journals/v1/")
        .then((res) => {
            console.log(res.data);
            this.indexingList = res.data.indexingList;
          },
          (err) => {
            console.log(err);
          }
        );
    },

    deleteIndexing: function(dVal) {
      let sVal = {};
      sVal.indexing_id = dVal;
      this.api.putData("indexing/"   store.state.journalId   "/deleteindexing", sVal)
        .then((res) => {
            console.log(res.data);
          },
          (error) => {
            console.log(error);
          }
        );
    },
  },
  mounted: function() {
    this.getIndexingList();
  },
}

I'm getting data from the server using getIndexingList function in the form of the API get method. And removing the data once the user clicks the delete button by using the deleteIndexing function in the form of the put API method.
We wrote APIs in a separate file. Here in indexing.vue we are just passing the APIs.

Now I want to fix the delete(remove) function. The data was removed from the database once the user clicks the delete button but it is not removed from the webpage. Every time I need to refresh the page to see the changes.

CodePudding user response：

You can use Vue.delete (this.$delete) which also ensure that the deletion triggers the view updates.

Try this-

deleteIndexing: function(dVal) {
  let sVal = {};
  sVal.indexing_id = dVal;
  this.api
    .putData("indexing/"   store.state.journalId   "/deleteindexing", sVal)
    .then(
      (res) => {
        // find the item from indexingList and remove it
        // Also make sure your response has the id of the deleted item
        let index = this.indexingList.findIndex(item => item.id == res.id);
        if (index != -1) {
          this.$delete(this.indexingList, index);
        }
      },
      (error) => {
        console.log(error);
      },
    );
},