Question

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

模板：

<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未定义。

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

当然，我可以明确定义顺序结构（例如order: { customer: {} }），但这对我来说似乎不太好，特别是当数据结构增长到几个级别的嵌套对象时。

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

Answer 2

我认为你可以测试order.customer：

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

如果未定义order.customer，表达式评估将在第一个字词时停止而不会引发错误。

Answer 3

您可以使用三元运算符进行检查

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

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

3 个答案: