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

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

模板：

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

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

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

当然,我可以显式定义订单结构(例如,订单：{customer：{}}),但是这对我来说似乎不太好,尤其是当数据结构增长到多层嵌套的对象时.

解决方法:

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>

标签：javascript,vue-js,vue-component
来源： https://codeday.me/bug/20191013/1906021.html