Salve turma, Estou tentando criar um componente para alert/msg box e ocultar ou exibir esse componente quando a messagem mudar no componente pai. A intensão é uma vez que eu feche o alert-box, ele somente será exibido novamente se a messagem mudar, como no caso de um erro ao obter dados ou validacao de formulario, success messages, etc. Entretanto a prop é reativa e o componente pai está sempre fazendo update. Consigo ocultar uma vez, sem utilizar o hook updated porem se a mensagem muda no componente pai, o alert-box nao é reexibido. Existe a possiblidade de usar um $emit() porem nao gostaria dessa abordagem, gostaria de utilizar somente o estado do componente MsgBox. Alguem pode me dar uma ajudinha nessa flag para exbir/ocultar o componente?
//Component pai - Lista.vue
<template>
<div class="container">
<MessageBox :message="message"/>
</div>
</template>
<script>
import MessageBox from './shared/MessageBox';
export default {
components:{
MessageBox
},
data() {
return {
message: ''
}
},
}
</script>// ./shared/MesageBox.vue
<template>
<div class="alert alert-danger" v-show="content.length">
<button type="button" class="close"aria-label="Close" @click="close">
<span aria-hidden="true">×</span>
</button>
{{content}}
</div>
</template>
<script>
export default {
props: ['message'],
data() {
return {
content: ''
}
},
created: function(){
this.updateMessage();
},
methods:{
close: function() {
this.content = '';
},
updateMessage: function(){
this.content = this.message;
}
},
updated: function() {
this.updateMessage();
}
}
</script>
