Vue.js raise an error when view data in wrong case - time

Question

I have the following template:
<template>
<div>
<h1>Users from SQL Server!</h1>
<p>This component demonstrates fetching data from the server.</p>
<table v-if="userlist.length" class="table">
<thead>
<tr>
<th>Id</th>
<th>First</th>
<th>Last</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<!-- nb: These items must match the case they are passed in with (the Json passed back from .net Core serialises to lowerCamelCase) otherwise they will
show nothing and no error is raised! -->
<tr v-for="item in userlist">
<td>{{ item.userid }}</td>
<td>{{ item.firstname }}</td>
<td>{{ item.lastname }}</td>
<td>{{ item.createdonDate }}</td>
</tr>
</tbody>
</table>
<p v-else><em>Loading...</em></p>
</div>
This displays a table with no data. This is because the data passed in from the server has a different case to that used in the template items. If I fix them for example:
item.userId
item.firstName
item.lastName
item.createdOnDate
Then it works and data is displayed. The issue for me is that no error is returned. I am learning Vue using the .Net Core SPA template as a starter. But it took me a while to realise what I was doing wrong. If this was a model in the razor view it would have blown with a helpful error.
Is there a way to raise an error for this kind of thing?
I do have the Chrome Vue extension installed and realised the problem when I looked at the data there. But I was stumped for a while.
UPDATE 1: Thanks #ndpu for your solution but I am having trouble fitting it into my project. I have a boot.ts file like this:
import 'bootstrap';
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use((VueRouter) as any);
Vue.config.devtools = true;
const routes = [
{ path: '/', component: require('./components/home/home.vue.html') },
{ path: '/counter', component:
require('./components/counter/counter.vue.html') },
{ path: '/fetchdata', component:
require('./components/fetchdata/fetchdata.vue.html') },
{ path: '/users', component: require('./components/users/users.vue.html') },
{ path: '/user', component: require('./components/user/user.vue.html') }
];
new Vue({
el: '#app-root',
router: new VueRouter({ mode: 'history', routes: routes }),
render: h => h(require('./components/app/app.vue.html'))
});
Where do I put the Object.prototype.safeGet? In there or in my component templates? Nowhere seems to work.
UPDATE 2:
I got it to work by putting the code from #ndpu into app.ts like this:
import Vue from "vue";
import { Component } from 'vue-property-decorator';
#Component({
components: {
MenuComponent: require('../navmenu/navmenu.vue.html')
}
})
export default class AppComponent extends Vue {
}
Object.defineProperty(Object.prototype, 'safeGet', {
get: function () {
return this;
}
});

Answer 1

Simplest way: define additional property to Object with getter that will only return himself.
/* eslint no-extend-native: ["error", { "exceptions": ["Object"] }] */
Object.defineProperty(Object.prototype, 'safeGet', {
get: function () {
return this;
}
});
So, by adding safeGet to any data attribute, you can be sure that you will get TypeError if attribute is undefined:
this:
<td>{{ item.userid.safeGet }}</td>
will produce exception (if actual property name is userId):
TypeError: Cannot read property 'safeGet' of undefined
FIDDLE: http://jsfiddle.net/yMv7y/2785/
Also, you can define simple method in object prototype to check property existence:
UPDATE: i couldn't make it work in 'complex' application with modules, webpack etc - vue trying to make added to Object.prototope method reactive. Didnt know why it is work in simple case like in applied fiddle.
Object.prototype.safeGet = function() {
var val, args = Array.prototype.slice.call(arguments);
var currLvlObj = this;
for (var i=0; i < args.length; i++) {
val = currLvlObj = currLvlObj? currLvlObj[args[i]] : undefined;
if (val === undefined) {
throw Error('property with name ' + args[i] + ' is undefined');
}
}
return val;
}
and use it like this:
<td>{{ item.safeGet('userid') }}</td>
this call should throw error (if actual property name is userId): Error: property with name userid is undefined
PS: nested objects properties can be accessed by passing all property names as arguments. For example, to access 'userId' in {'data': {'userId': 0}}:
<td>{{ item.safeGet('data', 'userid') }}</td>
FIDDLE: http://jsfiddle.net/yMv7y/2778/