VueJs строка сращивания с идентификатором

Question

Я хочу удалить свой элемент из базы данных, и он удаляется успешно, но мой элемент не будет склеен из списка.

Я знаю, что, вероятно, мне следует использовать index для склейки но если я использую index, то я не могу передать свой itemID, чтобы отправить его на сервер, так что вроде застрял в ситуации.

Issue

1. Если я использую index, он отправляет индексный номер на сервер, что неверно
2. Если я использую itemId, это удалит элемент из базы данных, но не будет удален из списка

код

HTML

<el-col :span="9" style="margin-top:15px;">
    <template v-for="itemm in item.children" >
        <div :key="itemm.id">
            <!-- child's -->
            <el-input :value="itemm.name" placeholder="Please input your variation value" class="input-with-select">
            <el-button slot="append" @click="removeSavedChild(itemm.id)" type="danger" icon="el-icon-delete"></el-button>
            </el-input>
        </div>
    </template>
</el-col>

Script

data() {
  return {
     savedVariations: [],
  }
},
methods: {
  removeSavedChild(id){
    axios.delete('/api/admin/variations/destroy/'+id).then((res) => {
        console.log(res.data.success);
        this.savedVariations.splice(id, 1);
    })
    .catch((err) => {
        console.log(err)
    });
  },
}

Есть идеи?

Answer 1

Вы можете использовать и идентификатор и индекс для него. Как показано ниже

removeSavedChild(id, index, items){
    axios.delete('/api/admin/variations/destroy/'+id).then((res) => {
        console.log(res.data.success);
        items.splice(index, 1);
    })
    .catch((err) => {
        console.log(err)
    });
  },

в вашем событии клика, вы будете проходить следующим образом.

@click="removeSavedChild(itemm.id, index, item.children)"

при условии, что вы в качестве значения для l oop поместите туда индекс, например,

<template v-for="(itemm, index) in item.children" >