Question

我有以下模板：

<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>

这将显示一个没有数据的表。这是因为从服务器传入的数据与模板项中使用的数据具有不同的大小写。如果我修复它们，例如：

item.userId
item.firstName
item.lastName
item.createdOnDate

然后它工作并显示数据。我的问题是没有错误返回。我正在使用.Net Core SPA模板作为入门者学习Vue。但我花了一段时间才意识到我做错了什么。如果这是剃须刀视图中的模型，那么它将会有一个有用的错误。

有没有办法为这种事情引发错误？

我确实安装了Chrome Vue扩展程序，并在查看数据时发现了问题。但我被困了一段时间。

更新1：感谢@ndpu的解决方案，但我无法将其融入我的项目中。我有一个像这样的boot.ts文件：

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'))
});

我在哪里放Object.prototype.safeGet？在那里或在我的组件模板中？似乎无处可行。

更新2：

我通过将@ndpu中的代码放到像这样的app.ts来实现它：

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

最简单的方式：使用只能返回的getter定义Object的附加属性。

/* eslint no-extend-native: ["error", { "exceptions": ["Object"] }] */

Object.defineProperty(Object.prototype, 'safeGet', {
    get: function () {             
        return this;
    }
});

因此，通过向任何数据属性添加safeGet，如果属性未定义，您可以确定获得TypeError：

这样：

<td>{{ item.userid.safeGet }}</td>

将产生异常（如果实际属性名称为userId）：

TypeError: Cannot read property 'safeGet' of undefined

FIDDLE：http://jsfiddle.net/yMv7y/2785/

此外，您可以在对象原型中定义简单方法来检查属性是否存在：

更新：我无法在带有模块，webpack等的“复杂”应用程序中运行 - 尝试添加到Object.prototope方法被动。不知道为什么它在简单的情况下工作，如应用小提琴。

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;
}

并像这样使用它：

<td>{{ item.safeGet('userid') }}</td>

此调用应抛出错误（如果实际属性名称为userId）：Error: property with name userid is undefined

PS：可以通过将所有属性名称作为参数传递来访问嵌套对象属性。例如，要访问{'data': {'userId': 0}}中的“userId”：

<td>{{ item.safeGet('data', 'userid') }}</td>

FIDDLE ：http://jsfiddle.net/yMv7y/2778/

在错误的情况下查看数据时，Vue.js引发错误

1 个答案:

FIDDLE：http://jsfiddle.net/yMv7y/2785/