当vue代码第一次执行时服务[0]在第一时间不可用。
服务数据来自使用vuex存储的mapGetters。当我显示数值时，我得到错误
错误屏幕截图
我在控制台中得到了错误，但数据还是会显示出来。为什么会发生这种情况？如何删除错误
<table border="0" id="tab">
<tr><td >Name </td><td >: {{services[0].organization.name}}</td></tr>
<tr><td>Name of Organisation </td><td>: {{services[0].organization.organizationName}}</td></tr>
<tr><td>Email </td><td>: {{services[0].organization.email}}</td></tr>
<tr><td>Mobile </td><td>: {{services[0].organization.phone}}</td></tr>
<tr><td>Location </td><td>: {{services[0].organization.address.no}} {{services[0].organization.address.street}} {{services[0].organization.address.locality}} {{services[0].organization.address.state}}</td></tr>
<tr><td>Zipcode </td><td>: {{services[0].zipcode}}</td></tr>
</table>
非常直接和简单的解决方案是隐藏table，直到services[0]可用：
<table border="0" id="tab" v-if="services[0]">
我假设初始状态或services是空数组，这就是为什么当第一个组件渲染发生时，它会显示这些错误，因为此时无法访问services[0].organization。
更进一步，您可以定义computed道具，如果根本不想隐藏表，它将返回具有一些默认值的organization对象。
<tr><td >Name </td><td >: {{organization.name}}</td></tr>
computed: {
organization () {
if (!this.services[0]) {
return {
name: '',
// other organization props here
}
}
return this.services[0].organization
}
}
我在控制台中得到了错误，但数据还是会显示出来。为什么会发生这种情况？
一旦服务[0]可用，随着双向数据绑定的工作，它将更新DOM(文档对象模型(中的值。所以，这就是为什么你的数据会显示一个警告。
您只需在table标记中添加v-if属性即可。
<table border="0" id="tab" v-if"services[0]">
有关更多参考，请查看MVVM体系结构的官方文档。Vue型号
检查服务长度。试试这个。
<table border="0" id="tab" v-if"services.length > 0">