【Vue.js】How to delete when adding a delete button to the item turned by v-for

Solution for 【Vue.js】How to delete when adding a delete button to the item turned by v-for
is Given Below:

want to

I’m turning v-for in Vue.js to get items out of an array.

I want to put a delete button on each item and execute deletion by pressing the delete button.

I’m fetching items one by one with v-for, but I can’t get the id to delete the item

source

<template>
  <main>
    <section>
      <table>
        <thead>
        <tr>
          <th>タイトル</th>
          <th>詳細</th>
        </tr>
        </thead>
        <tbody>

        <tr v-for="latest_information in latest_informations">
          <td>{{ latest_information.title }}</td>
          <td>{{ latest_information.detail }}</td>
          <td>
            <button type="button" @click="onDeleteConfirmSend(latest_information)" >
              <i class="fas fa-trash"></i>
            </button>
          </td>
        </tr>
        </tbody>
      </table>
    </section>
  </main>
</template>

<script>

export default {


  data() {
    return {
      latest_informations: {},
    }
  },
  methods: {
    setData(query) {
      this.$loading.load(this.$auth.api.get(`admin/latest_informations.json`, {params: query})
          .then(response => {
            this.latest_informations = response.data.latest_informations
          })
          .catch(err => {
            this.$errorHandlers.initial(err);
          }));
      console.log(latest_informations)
    },

    onDeleteConfirmSend(latest_information) {
      this.$auth.api.delete(`admin/latest_informations/${latest_information}.json`)
          .then(response => {
            this.$router.push({name: 'AdminLatestInformationIndex', query: {toast_type: 'deleted'}})
          })
          .catch(err => {
            this.$errorHandlers.initial(err);
          })
    }
  },
  mounted() {
    this.setData(this.$route.query);
  },
}
</script>


log
Started DELETE “/api/v1/admin/latest_informations/[object%20Object].json”

tried

Make a decision without deciding what to delete dynamically

    onDeleteConfirmSend(latest_information) {
      this.$auth.api.delete(`admin/latest_informations/4.json`)
          .then(response => {
            this.$router.push({name: 'AdminLatestInformationIndex', query: {toast_type: 'deleted'}})
          })
          .catch(err => {
            this.$errorHandlers.initial(err);
          })
    }

I was able to delete it safely

latest_information is an object (based on its usage in the v-for body). The delete button’s click handler passes the latest_information object to the delete function:

<button type="button" @click="onDeleteConfirmSend(latest_information)">

But onDeleteConfirmSend tries to convert that object into a string (resulting in [object Object]), and inserts it into the DELETE endpoint URL:

onDeleteConfirmSend(latest_information) {
  this.$auth.api.delete(`admin/latest_informations/${latest_information}.json`)
  //...                                            ^^^^^^^^^^^^^^^^^^^^^
}

It looks like the endpoint actually expects a numeric identifier. Assuming that’s represented by an id property, you could update your click-handler binding to pass that property to the delete function.

Also at this point, you should probably remove the item from the displayed list as well. You’ll need the index of the item to splice it, so update your click-handler binding to pass the item’s index:

<template>
  <tr v-for="(latest_information, index) in latest_informations">
    ...
    <button type="button" @click="onDeleteConfirmSend(latest_information.id, index)">
    </button>
  </tr>
</template>

<script>
export default {
  methods: {
    onDeleteConfirmSend(id, index) {
      this.latest_informations.splice(index, 1)
      this.$auth.api.delete(`admin/latest_informations/${id}.json`)
      //...
    }                                       
  }
}
</script>

First off you are not deleting anything from your array in onDeleteConfirmSend. I am going to assume that somehow your data is updating (you can confirm this in vue devtools). If it is not, well you will need to delete the item from the array.

Therefore the next thing I would assume is the issue is that there is no key triggering a refresh of your v-list.

Typically you would bind it to an item in your array, however in this case I’d bind it to a computed property based on the length of your array.

computed:{
   arr_len(){
      return this.latest_informations.length;
   }
}

Then in your template, add a key to regenerate your list.

<tbody :key="arr_len">
   <!-- Your HTML -->
</tbody>