fix: guard against missing data elements by using lodash.get

src/Localization/en-US.json

@@ -56,5 +56,12 @@
       "contact": "Contact",
       "cityStateZip": "Illinois 60601, USA",
       "allRightsReserved": "All rights reserved."
+    },
+    "Article": {
+        "noTitleValue": "(Article  has no title)",
+        "noTeaserValue": "(Article  has no teaser image)",
+        "noSummaryValue": "No summary filled",
+        "noBodyCopyValue" : "No body copy element filled",
+        "noPostDateValue": "No post date filled"
     }
 }

src/Localization/es-ES.json

@@ -56,5 +56,13 @@
       "contact": "Contacto",
       "cityStateZip": "Illinois 60601, EE.UU.",
       "allRightsReserved": "Todos los derechos reservados."
+    },
+    "Article": {
+        "noTitleValue": "(El artículo no tiene título)",
+        "noTeaserValue": "(El artículo no tiene imagen teaser)",
+        "noSummaryValue": "Sin resumen lleno",
+        "noBodyCopyValue" : "Ningún elemento body copy lleno",
+        "noPostDateValue": "Ningún elemento post date lleno"
     }
+
 }

src/components/Article.vue

@@ -15,28 +15,36 @@
             <div class="row">
                 <div class="article-detail-image col-md-push-2 col-md-8">
                     <img
+                        v-if="articleData.imageLink"
                         :alt="articleData.title"
                         class="img-responsive"
                         :src="articleData.imageLink"
                         :title="articleData.title"
                     />
+                    <span 
+                        v-else 
+                        class="img-responsive"
+                    >{{ $t('Article.noTeaserValue') }}</span>
                 </div>
             </div>
             <div class="row">
                 <RichTextElement
+                    v-if="articleData.bodyCopyElement.getHtml()"
                     styleClass="article-detail-content"
                     :element="articleData.bodyCopyElement"
                 />
+                <span class="article-detail-content">{{ $t('Article.noBodyCopyValue')}}</span>
             </div>
         </article>
     </div>
 </template>
 
 <script>
-import { ArticleStore } from '../Stores/Article'
+import { ArticleStore } from '../Stores/Article';
 import dateFormat from 'dateformat';
-import { dateFormats } from '../Utilities/LanguageCodes'
-import RichTextElement from './RichTextElement.vue'
+import { dateFormats } from '../Utilities/LanguageCodes';
+import RichTextElement from './RichTextElement.vue';
+import _ from 'lodash';
 
 export default {
   name: 'Article',
@@ -45,13 +53,13 @@ export default {
     article: null,
   }),
   computed: {
-    articleData: function(){
-      return ({
-        title: this.article.title.value,
-        imageLink: this.article.teaserImage.value[0].url,
-        postDate: this.formatDate(this.article.postDate.value),
-        bodyCopyElement: this.article.bodyCopy,
-      })
+    articleData: function() {
+      return {
+        title: _.get(this.article, 'title.value') || this.$t('Article.noTitleValue'),
+        imageLink: _.get(this.article, 'teaserImage.value[0].url'),
+        postDate: this.formatDate(_.get(this.article, 'postDate.value')),
+        bodyCopyElement: _.get(this.article, 'bodyCopy') || this.$t('Article.noBodyCopyValue')
+      };
     }
   },
   watch: {
@@ -62,7 +70,7 @@ export default {
   },
   methods: {
     formatDate: function(value){
-      return dateFormat(value, 'dddd, mmmm d, yyyy');
+      return value ? dateFormat(value, 'dddd, mmmm d, yyyy') : this.$t('Article.noPostDateValue');
     },
     onChange: function(){
       this.article = ArticleStore.getArticle(this.$route.params.articleId, this.language);
@@ -86,7 +94,6 @@ export default {
   },
   components: {
     RichTextElement
-  },
-
+  }
 }
 </script>

src/components/Articles.vue

@@ -11,11 +11,16 @@
                     <div class="article-tile">
                         <router-link :to="article.link">
                             <img
+                                v-if="article.imageLink"
                                 :alt="'Article '  + article.title"
                                 class="article-tile-image"
                                 :src="article.imageLink"
                                 :title="'Article ' + article.title"
                             />
+                            <span 
+                                v-else 
+                                class="article-tile-image"
+                            >{{ $t('Article.noTeaserValue') }}</span>
                         </router-link>
                         <div class="article-tile-date">
                             {{article.postDate}}
@@ -39,6 +44,7 @@
 import dateFormat from 'dateformat';
 import { ArticleStore } from '../Stores/Article';
 import { dateFormats } from '../Utilities/LanguageCodes';
+import _ from 'lodash';
 
 export default {
   name: 'Articles',
@@ -50,11 +56,11 @@ export default {
   computed: {
     articlesData: function() {
       return this.articles.map(article => ({
-        title: article.title.value,
-        imageLink: article.teaserImage.value[0].url,
-        postDate: this.formatDate(article.postDate.value),
-        summary: article.summary.value,
-        link: `/${this.language}/articles/${article.system.id}`
+        title: _.get(article, 'title.value') || this.$t('Article.noTitleValue'),
+        imageLink: _.get(article, 'teaserImage.value[0].url'),
+        link: `/${this.language}/articles/${_.get(article, 'system.id')}`,
+        postDate: this.formatDate(_.get(article, 'postDate.value')),
+        summary: _.get(article, 'summary.value') || this.$t('Article.noSummaryValue')
       }));
     }
   },
@@ -66,7 +72,7 @@ export default {
   },
   methods: {
     formatDate: function(value) {
-      return dateFormat(value, 'mmmm d');
+      return value ? dateFormat(value, 'mmmm d') : this.$t('Article.noPostDateValue');
     },
     onChange: function() {
       this.articles = ArticleStore.getArticles(

src/components/LatestArticles.vue

@@ -13,11 +13,16 @@
             <div class="col-md-12 col-lg-6">
                 <router-link :to="articlesData[0].link">
                     <img
+                        v-if="articlesData.imageLink"
                         v-bind:alt="articlesData[0].title"
                         class="article-tile-image"
                         v-bind:src="articlesData[0].imageLink"
                         v-bind:title="articlesData[0].title"
                     />
+                    <span 
+                        v-else 
+                        class="article-tile-image"
+                    >{{ $t('Article.noTeaserValue') }}</span>
                 </router-link>
             </div>
             <div class="col-md-12 col-lg-6">
@@ -42,11 +47,16 @@
             <div class="article-tile">
                 <router-link :to="article.link">
                     <img
+                        v-if="article.imageLink"
                         v-bind:alt="'Article' + article.title"
                         class="article-tile-image"
                         v-bind:src="article.imageLink"
                         v-bind:title="'Article' + article.title"
                     />
+                    <span 
+                        v-else 
+                        class="article-tile-image"
+                    >{{ $t('Article.noTeaserValue') }}</span>
                 </router-link>
                 <div class="article-tile-date">
                     {{article.postDate}}
@@ -68,6 +78,7 @@
 import { ArticleStore } from '../Stores/Article'
 import dateFormat from 'dateformat'
 import { dateFormats } from '../Utilities/LanguageCodes'
+import _ from 'lodash';
 
 export default {
   name: 'latest-articles',
@@ -79,9 +90,9 @@ export default {
   computed: {
     articlesData: function(){
       return this.articles.map(article => ({
-        imageLink : article.teaserImage.value[0].url,
-        postDate : this.formatDate(article.postDate.value),
-        summary : article.summary.value,
+        imageLink: _.get(article, 'teaserImage.value[0].url'),
+        postDate : this.formatDate(_.get(article, 'postDate.value')),
+        summary :  _.get(article, 'summary.value') || this.$t('Article.noSummaryValue'),
         link : `/${this.language}/articles/${article.system.id}`,
       }))
     }
@@ -94,7 +105,7 @@ export default {
   },
   methods: {
     formatDate: function(value){
-      return dateFormat(value, 'mmmm d');
+      return value ? dateFormat(value, 'mmmm d') : this.$t('Article.noPostDateValue');
     },
     onChange: function(){
       this.articles = ArticleStore.getArticles(this.articleCount, this.language);

vue.cli.config

@@ -0,0 +1,5 @@
+module.exports = {
+  configureWebpack: {
+    devtool: 'source-map'
+  }
+}