diff --git a/frontend/src/components/Dashboard/DashboardMessages.vue b/frontend/src/components/Dashboard/DashboardMessages.vue
index ff3c2481..d4b07b74 100644
--- a/frontend/src/components/Dashboard/DashboardMessages.vue
+++ b/frontend/src/components/Dashboard/DashboardMessages.vue
@@ -14,10 +14,10 @@
             </thead>
             <tbody>
 
-            <tr v-for="(message, index) in $store.getters.messages" v-bind:key="index">
+            <tr v-for="message in $store.getters.messages" v-bind:key="message.id">
                 <td>{{message.title}}</td>
                 <td class="d-none d-md-table-cell">
-                    <router-link :to="serviceLink(message.service)">{{service(message.service)}}</router-link>
+                  <router-link :to="serviceLink(service(message.service))">{{serviceName(service(message.service))}}</router-link>
                 </td>
                 <td class="d-none d-md-table-cell">{{niceDate(message.start_on)}}</td>
                 <td class="text-right">
@@ -60,8 +60,10 @@
       this.edit = !mode
     },
     service (id) {
-      const s = this.$store.getters.serviceById(id) || {}
-      return s.name || "Global Message"
+      return this.$store.getters.serviceById(id) || {}
+    },
+    serviceName (service) {
+      return service.name || "Global Message"
     },
     async deleteMessage(m) {
       let c = confirm(`Are you sure you want to delete message '${m.title}'?`)
diff --git a/frontend/src/forms/Message.vue b/frontend/src/forms/Message.vue
index 134490cd..6d21ccb1 100644
--- a/frontend/src/forms/Message.vue
+++ b/frontend/src/forms/Message.vue
@@ -26,9 +26,9 @@
         <div class="form-group row">
             <label class="col-sm-4 col-form-label">Service</label>
             <div class="col-sm-8">
-                <select v-model="message.service_id" name="service_id" class="form-control">
+                <select v-model="message.service" name="service_id" class="form-control">
                     <option :value="0">Global Announcement</option>
-                    <option v-for="(service, i) in $store.getters.services" :value="service.id" >{{service.name}}</option>
+                    <option v-for="service in $store.getters.services" :value="service.id" v-bind:key="service.id" >{{service.name}}</option>
                 </select>
             </div>
         </div>
@@ -46,9 +46,9 @@
         <div v-show="this.service === null" class="form-group row">
             <label for="service_id" class="col-sm-4 col-form-label">Service</label>
             <div class="col-sm-8">
-                <select v-model="message.service_id" class="form-control" name="service" id="service_id">
+                <select v-model="message.service" class="form-control" name="service" id="service_id">
                     <option :value="0">Global Message</option>
-                    <option v-for="(service, index) in $store.getters.services" :value="service.id" v-bind:key="index" >{{service.name}}</option>
+                    <option v-for="service in $store.getters.services" :value="service.id" v-bind:key="service.id">{{service.name}}</option>
                 </select>
             </div>
         </div>
diff --git a/frontend/src/mixin.js b/frontend/src/mixin.js
index d1a285b6..0b0104d0 100644
--- a/frontend/src/mixin.js
+++ b/frontend/src/mixin.js
@@ -79,12 +79,15 @@ export default Vue.mixin({
       if (service.permalink) {
         service = this.$store.getters.serviceByPermalink(service.permalink)
       }
-      if (service===undefined) {
+      if (service===undefined || this.isEmptyObject(service)) {
         return `/service/0`
       }
       let link = service.permalink ? service.permalink : service.id
       return `/service/${link}`
     },
+    isEmptyObject(obj) {
+      return Object.keys(obj).length === 0 && obj.constructor === Object
+    },
     isInt(n) {
       return n % 1 === 0;
     },