X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=src%2Fcomponents%2FMessage.vue;h=d007d3ec222e005c29f8c5c81fcefa10f40ab9c2;hb=db738288fa7c99a3d5aa47f35a634297c7b1f506;hp=fcb0fbba9bb79adf4770dfa8c094a53152a9a3d4;hpb=5fa6b6cfa6b3010279ead23088add5c5664e8ac0;p=github%2Fbastienwirtz%2Fhomer.git

diff --git a/src/components/Message.vue b/src/components/Message.vue
index fcb0fbb..d007d3e 100644
--- a/src/components/Message.vue
+++ b/src/components/Message.vue
@@ -1,9 +1,13 @@
 <template>
-  <article v-if="item" class="message" :class="item.style">
-    <div v-if="item.title" class="message-header">
-      <p>{{ item.title }}</p>
+  <article v-if="show" class="message" :class="message.style">
+    <div v-if="message.title" class="message-header">
+      <p>{{ message.title }}</p>
     </div>
-    <div v-if="item.content" class="message-body" v-html="item.content"></div>
+    <div
+      v-if="message.content"
+      class="message-body"
+      v-html="message.content"
+    ></div>
   </article>
 </template>
 
@@ -13,19 +17,25 @@ export default {
   props: {
     item: Object,
   },
-  created: function () {
+  data: function () {
+    return {
+      show: false,
+      message: {},
+    };
+  },
+  created: async function () {
     // Look for a new message if an endpoint is provided.
-    let that = this;
+    this.message = Object.assign({}, this.item);
     if (this.item && this.item.url) {
-      this.getMessage(this.item.url).then(function (message) {
-        // keep the original config value if no value is provided by the endpoint
-        for (const prop of ["title", "style", "content"]) {
-          if (prop in message && message[prop] !== null) {
-            that.item[prop] = message[prop];
-          }
+      const fetchedMessage = await this.getMessage(this.item.url);
+      // keep the original config value if no value is provided by the endpoint
+      for (const prop of ["title", "style", "content"]) {
+        if (prop in fetchedMessage && fetchedMessage[prop] !== null) {
+          this.message[prop] = fetchedMessage[prop];
         }
-      });
+      }
     }
+    this.show = this.message.title || this.message.content;
   },
   methods: {
     getMessage: function (url) {