From 8c0122cb9d3fdddf5e8acd9a978b0467ef858ed7 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 25 Nov 2020 13:50:15 +0300
Subject: [PATCH] Fixed #653 - Closing message and reopening it does not work

---
 src/components/message/Message.vue | 2 +-
 src/views/message/MessageDemo.vue  | 8 ++++----
 src/views/message/MessageDoc.vue   | 8 ++++----
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/message/Message.vue b/src/components/message/Message.vue
index f375dfdffd..0b645636a2 100755
--- a/src/components/message/Message.vue
+++ b/src/components/message/Message.vue
@@ -1,6 +1,6 @@
 <template>
     <transition name="p-message" appear>
-        <div :class="containerClass" v-if="visible" role="alert">
+        <div :class="containerClass" v-show="visible" role="alert">
             <div class="p-message-wrapper">
                 <span :class="iconClass"></span>
                 <div class="p-message-text">
diff --git a/src/views/message/MessageDemo.vue b/src/views/message/MessageDemo.vue
index 50bf6d68ec..9786e7d9ff 100755
--- a/src/views/message/MessageDemo.vue
+++ b/src/views/message/MessageDemo.vue
@@ -18,7 +18,7 @@
                 <h5>Dynamic</h5>
                 <Button label="Show" @click="addMessages()" />
                 <transition-group name="p-message" tag="div">
-                    <Message v-for="msg of messages" :severity="msg.severity" :key="msg.content">{{msg.content}}</Message>
+                    <Message v-for="msg of messages" :severity="msg.severity" :key="msg.id">{{msg.content}}</Message>
                 </transition-group>
 
                 <h5>Auto Dismiss</h5>
@@ -55,9 +55,9 @@ export default {
     methods: {
         addMessages() {
             this.messages = [
-                {severity: 'info', content: 'Dynamic Info Message'},
-                {severity: 'success', content: 'Dynamic Success Message'},
-                {severity: 'warn', content: 'Dynamic Warning Message'}
+                {severity: 'info', content: 'Dynamic Info Message', id: this.count++},
+                {severity: 'success', content: 'Dynamic Success Message', id: this.count++},
+                {severity: 'warn', content: 'Dynamic Warning Message', id: this.count++}
             ]
         }
     },
diff --git a/src/views/message/MessageDoc.vue b/src/views/message/MessageDoc.vue
index 0606ebf006..86030e7d35 100755
--- a/src/views/message/MessageDoc.vue
+++ b/src/views/message/MessageDoc.vue
@@ -254,7 +254,7 @@ import InlineMessage from 'primevue/inlinemessage';
 &lt;h5&gt;Dynamic&lt;/h5&gt;
 &lt;Button label="Show" @click="addMessages()" /&gt;
 &lt;transition-group name="p-message" tag="div"&gt;
-    &lt;Message v-for="msg of messages" :severity="msg.severity" :key="msg.content"&gt;{{msg.content}}&lt;/Message&gt;
+    &lt;Message v-for="msg of messages" :severity="msg.severity" :key="msg.id"&gt;{{msg.content}}&lt;/Message&gt;
 &lt;/transition-group&gt;
 
 &lt;h5&gt;Auto Dismiss&lt;/h5&gt;
@@ -286,9 +286,9 @@ export default {
 	methods: {
 		addMessages() {
 			this.messages = [
-				{severity: 'info', content: 'Dynamic Info Message'},
-				{severity: 'success', content: 'Dynamic Success Message'},
-				{severity: 'warn', content: 'Dynamic Warning Message'}
+				{severity: 'info', content: 'Dynamic Info Message', id: this.count++},
+				{severity: 'success', content: 'Dynamic Success Message', id: this.count++},
+				{severity: 'warn', content: 'Dynamic Warning Message', id: this.count++}
 			]
 		}
 	}