如何在 Vue 中获取数据之前抑制“未定义”错误答案

【问题标题】：How to suppress "Undefined" errors before fetching data in Vue如何在 Vue 中获取数据之前抑制“未定义”错误
【发布时间】：2018-04-12 12:29:26
【问题描述】：

我有一个简单的页面，其中显示了从服务器获取的一些数据。

模板：

<p>Order's customer name: {{ order.customer.name }}</p>

Javascript：

export default {
    data () { return { order: {} } },
    mounted () { this.fetchOrder() },
    methods: {
        fetchOrder () {
            /* get the order data asynchronously from the server */
            .success(function () { this.order = data_from_server })
        }
    }
}

一切正常，但在浏览器的控制台中出现错误：“无法读取未定义的属性 'name'”。显然问题是从服务器获取订单数据需要一些时间，同时它尝试访问order.customer.name，这会导致错误，因为order.customer是未定义的。

如何抑制此错误？最好的解决方案是什么？

当然，我可以显式定义顺序结构（例如order: { customer: {} }），但这对我来说似乎不太好，尤其是当数据结构增长到多层嵌套对象时。

【问题讨论】：

在打字稿中你会得到order.customer?.name，但在JS中我害怕你最终会有一些“丑陋”的东西。

标签： javascript vue.js vue-component

【解决方案1】：

new Vue({
  el: '#app',
  data: {
    data: {name: 'daniel'},
    data2: {}
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p v-if="data" v-text="data.name"></p>
  <p v-if="data2" v-text="data2.name"></p>
</div>

您需要有条件地渲染它。由于从一开始就无法访问来自后端的数据，因此您应该仅在数据准备好时添加条件来显示元素。见例子。

<p>Order's customer name: <span v-if="order" v-text="order.customer.name"></span></p>

【讨论】：

【解决方案2】：

我想你可以测试一下order.customer：

{{ order.customer && order.customer.name }}

如果order.customer 未定义，则表达式计算将简单地在第一个术语处停止而不会引发错误。

【讨论】：

【解决方案3】：

你可以使用三元运算符来检查

<p>Order's customer name: {{ order.customer?order.customer.name:'' }}</p>

【讨论】：