src/components/Message.vue

   1 <template>
   2   <article v-if="show" class="message" :class="message.style">
   3     <div v-if="message.title" class="message-header">
   4       <p>{{ message.title }}</p>
   5     </div>
   6     <div v-if="message.content" class="message-body" v-html="message.content"></div>
   7   </article>
   8 </template>
   9
  10 <script>
  11 export default {
  12   name: "Message",
  13   props: {
  14     item: Object,
  15   },
  16   data: function () {
  17     return {
  18       show: false,
  19       message: {},
  20     };
  21   },
  22   created: async function () {
  23     // Look for a new message if an endpoint is provided.
  24     this.message = Object.assign({}, this.item);
  25     if (this.item && this.item.url) {
  26       const fetchedMessage = await this.getMessage(this.item.url);
  27       // keep the original config value if no value is provided by the endpoint
  28       for (const prop of ["title", "style", "content"]) {
  29         if (prop in fetchedMessage && fetchedMessage[prop] !== null) {
  30           this.message[prop] = fetchedMessage[prop];
  31         }
  32       }
  33     }
  34     this.show = this.message.title || this.message.content;
  35   },
  36   methods: {
  37     getMessage: function (url) {
  38       return fetch(url).then(function (response) {
  39         if (response.status != 200) {
  40           return;
  41         }
  42         return response.json();
  43       });
  44     },
  45   },
  46 };
  47 </script>