Estou construindo um pequeno vueaplicativo onde, entre outras coisas, é possível excluir uma entrada de uma coleção de músicas. Portanto, neste ponto, tenho uma lista de álbuns de música e, ao lado da entrada, tenho um botão "excluir". Quando eu faço o seguinte:
<li v-for="cd in cds">
<span>{{cd.artist}} - {{cd.album}}</span> <button v-on:click="deleteAlbum(cd.ID)">Delete</button>
</li>
e então em meus métodos faço:
deleteAlbum(id){
this.$http.delete('/api/cds/delete/'+id)
.then(function(response){
this.fetchAll()
// });
},
isso funciona bem até agora, mas para torná-lo mais agradável, quero que a funcionalidade de exclusão apareça em um modal / pop-up, então fiz as seguintes alterações:
<li v-for="cd in cds">
<div class="cd-wrap">
<span>{{cd.artist}} - {{cd.album}}</span>
<button @click="showDeleteModal({id: cd.ID, artist: cd.artist, album: cd.album})" class="btn">Delete</button>
</div>
<delete-modal v-if="showDelete" @close="showDelete = false" @showDeleteModal="cd.ID = $event"></delete-modal>
</li>
então, como visto acima, criei um <delete-modal>-componente. Quando clico no botão delete, quero passar os dados da entrada para o <delete-modal>componente com a ajuda de um eventbus. Para isso, dentro dos meus métodos fiz o seguinte:
showDeleteModal(item) {
this.showDelete = true
eventBus.$emit('showDeleteModal', {item: item})
}
Então, <delete-modal>dentro do created()ciclo de vida eu fiz isso:
created(){
eventBus.$on('showDeleteModal', (item) => {
console.log('bus data: ', item)
})
}
isto me dá muitos pop-ups / modais abertos vazios !! ??
Alguém pode me dizer o que estou fazendo de errado aqui?
** EDITAR **
Após uma boa sugestão, descartei o método eventBus e passei os dados como suportes para o <delete-modal>então agora fica assim:
<delete-modal :id="cd.ID" :artist="cd.artist" :album="cd.album"></delete-modal>
e o componente delete-modal:
export default {
props: ['id', 'artist', 'album'],
data() {
return {
isOpen: false
}
},
created(){
this.isOpen = true
}
}
O único problema que tenho agora é que ele tenta abrir um modal para cada entrada, como posso detectar o ID / entrada correto?
Vou mostrar a você como fazer isso com adereços, já que é uma relação pai-filho. Vou mostrar uma maneira simples de fazer isso. Você precisa modificar ou adicionar algum código, é claro, para funcionar em seu aplicativo.
Componente pai
<template>
<div>
<li v-for="cd in cds" :key="cd.ID">
<div class="cd-wrap">
<span>{{cd.artist}} - {{cd.album}}</span>
<button
@click="showDeleteModal({id: cd.ID, artist: cd.artist, album: cd.album})"
class="btn"
>
Delete
</button>
</div>
<delete-modal v-if="showDelete" :modal.sync="showDelte" :passedObject="objectToPass"></delete-modal>
</li>
</div>
</template>
<script>
import Child from 'Child'
export default {
components: {
'delete-modal': Child
},
data() {
return {
showDelete: false,
objectToPass: null,
//here put your other properties
}
},
methods: {
showDeleteModal(item) {
this.showDelete = true
this.objectToPass = item
}
}
}
</script>
Componente Criança
<template>
/* Here put your logic component */
</template>
<script>
export default {
props: {
modal:{
default:false
},
passedObject: {
type: Object
}
},
methods: {
closeModal() { //the method to close the modal
this.$emit('update:modal')
}
}
//here put your other vue.js code
}
</script>
Quando você usa o modificador .sync para passar um prop no componente filho, aí (no cmp filho) você deve emitir um evento como:
this.$emit('update:modal')
E com isso o modal será fechado e aberto. Também usando props, passamos ao componente filho o objeto que contém o id e outras coisas.
Se você quiser saber mais sobre adereços, clique aqui
Este artigo é coletado da Internet.
Se houver alguma infração, entre em [email protected] Delete.
deixe-me dizer algumas palavras