src/components/Message.vue

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