У меня есть страница сообщений со списком медиа-вложений. Я хочу, чтобы пользователь мог вручную удалить вложение (я), когда он нажимает ссылку «удалить». Однако это событие работает, проблема в том, что удаляется не тот элемент, по которому щелкают! Что я делаю не так?
Вот мой код и живая демонстрация здесь: [codesandbox ] (щелкните ЗАПИСИ -> выберите идентификатор сообщения, чтобы просмотреть сведения о сообщении -> щелкните ИЗМЕНИТЬ сообщение)
EditPost.vue
<template>раздел:
...snip..
<ul>
<li>Media Attachments
<template>
<ul v-if="attachmentsFileNames && attachmentsFileNames.length">
<li v-for="(mediaAttachment, index) in attachmentsFileNames" :key="index">
<a href="#">{{ mediaAttachment }}</a>
<button @click.prevent="deleteMediaAttachment(mediaAttachment, index)">Delete me!</button>
</li>
</ul>
<p v-else>No Media Attachments</p>
</template>
</li>
</ul>
EditPost.vue
<script>:
...snip..
data() {
return {
post: {},
editPostFormIsVis: false,
attachmentsArray: attachments
};
},
created() {
this.getPost();
},
methods: {
getPost() {
axios
.get(
"https://jsonplaceholder.typicode.com/posts/" + this.$route.params.id
)
.then(resp => {
this.post = resp.data;
})
.catch(err => {
console.log(err);
});
},
editPost() {
this.editPostFormIsVis = true;
},
deleteMediaAttachment: function(item, index) {
if (this.attachmentsArray.attachments[index] === item) {
// The template passes index as the second parameter to avoid indexOf,
// it will be better for the performance especially for one large array
// (because indexOf actually loop the array to do the match)
this.attachmentsArray.attachments.splice(index, 1);
} else {
let found = this.attachmentsArray.attachments.indexOf(item);
this.attachmentsArray.attachments.splice(found, 1);
}
}
},
computed: {
emailAttachmentsFileNames() {
if (this.attachmentsArray.emailAttachments) {
const emailAttachmentsFileNameArray = this.attachmentsArray.emailAttachments.map(
item => {
const tokens = item.split("/");
return tokens[tokens.length - 1];
}
);
return emailAttachmentsFileNameArray;
} else {
return null;
}
},
attachmentsFileNames() {
if (this.attachmentsArray.attachments) {
const attachmentsFileNameArray = this.attachmentsArray.attachments.map(
item => {
const tokens = item.split("/");
return tokens[tokens.length - 1];
}
);
return attachmentsFileNameArray;
} else {
return null;
}
}
}
...snip...
