Как сделать реактивность при удалении записи в vue.js на моём примере?

Question

[semki096]

Я вывожу картинки в цикле

<tr v-for="img in image">
    <td>{{ img }}</td>
    <td> <button v-on:click="removeImage(id)">Remove image</button></td>
</tr>

Кнопка удаляет картинку из базы аяксом.

removeImage(id) {
                        axios.post('/img/delete/' + id).then(function(){
                          console.log('SUCCESS!!');
                        })
                        .catch(function(){
                          console.log('FAILURE!!');
                        });
                    },

Вопрос - как сделать так, чтобы и картинка на странице реактивно пропадала? Имею ввиду средствами vue js если это возможно. Спасибо.

Comments

[0xD34F]

как сделать так, чтобы и картинка на странице реактивно пропадала?

Да хрен его знает. Вы же наврали про свой код. Или дико накосячили. В шаблоне - почему в removeImage передаётся какой-то id, что это такое, откуда он взялся, почему он одинаковый для всех элементов? Как вы собираетесь удалять разные элементы на основе одного значения? Это абсурд.

[Кирилл Конторович]

Если нужна логика, то суть должна быть такая. После удаления, либо присылать полную выборку из базы, либо id удаленной записи, и с помощь underscore или lodash, либо средствами js, что не очень удобно, искать объект с таким id и удалять его из массива, тогда данные реактивно изменяться

[semki096]

0xD34F, это упрощённый код, урезал чтоб показать суть вопроса

Answer 1

[pantagruel964]

<tr v-for="(img, n) in image">
    <td>{{ img }}</td>
    <td> <button v-on:click="removeImage(n)">Remove image</button></td>
</tr>

...
.then(response => {
     this.image.splice(n, 1);
})
...

Comments

[semki096]

Спасибо. А не подскажете как это работает?

.then(response => {
     this.image.splice(n, 1);
})

[pantagruel964]

Что именно?

[semki096]

pantagruel964, спасибо ещё раз, разобрался.