aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--src/components/Message.vue32
1 files changed, 19 insertions, 13 deletions
diff --git a/src/components/Message.vue b/src/components/Message.vue
index fcb0fbb..2c3df40 100644
--- a/src/components/Message.vue
+++ b/src/components/Message.vue
@@ -1,9 +1,9 @@
1<template> 1<template>
2 <article v-if="item" class="message" :class="item.style"> 2 <article v-if="show" class="message" :class="message.style">
3 <div v-if="item.title" class="message-header"> 3 <div v-if="message.title" class="message-header">
4 <p>{{ item.title }}</p> 4 <p>{{ message.title }}</p>
5 </div> 5 </div>
6 <div v-if="item.content" class="message-body" v-html="item.content"></div> 6 <div v-if="message.content" class="message-body" v-html="message.content"></div>
7 </article> 7 </article>
8</template> 8</template>
9 9
@@ -13,19 +13,25 @@ export default {
13 props: { 13 props: {
14 item: Object, 14 item: Object,
15 }, 15 },
16 created: function () { 16 data: function () {
17 return {
18 show: false,
19 message: {},
20 };
21 },
22 created: async function () {
17 // Look for a new message if an endpoint is provided. 23 // Look for a new message if an endpoint is provided.
18 let that = this; 24 this.message = Object.assign({}, this.item);
19 if (this.item && this.item.url) { 25 if (this.item && this.item.url) {
20 this.getMessage(this.item.url).then(function (message) { 26 const fetchedMessage = await this.getMessage(this.item.url);
21 // keep the original config value if no value is provided by the endpoint 27 // keep the original config value if no value is provided by the endpoint
22 for (const prop of ["title", "style", "content"]) { 28 for (const prop of ["title", "style", "content"]) {
23 if (prop in message && message[prop] !== null) { 29 if (prop in fetchedMessage && fetchedMessage[prop] !== null) {
24 that.item[prop] = message[prop]; 30 this.message[prop] = fetchedMessage[prop];
25 }
26 } 31 }
27 }); 32 }
28 } 33 }
34 this.show = this.message.title || this.message.content;
29 }, 35 },
30 methods: { 36 methods: {
31 getMessage: function (url) { 37 getMessage: function (url) {