Fixed #653 - Closing message and reopening it does not work

primefaces · Nov 25, 2020 · 8c0122c · 8c0122c
1 parent 835ad45
commit 8c0122c
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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++}
 			]
 		}
 	}