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