Tengo una página simple donde visualizo algunos datos que se obtienen del servidor.

Plantilla:

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

Todo funciona bien, pero en la consola del navegador hay un error: " No se puede leer la propiedad 'nombre' de indefinido ". Aparentemente, el problema es que lleva un tiempo recuperar los datos del pedido del servidor y, mientras tanto, intenta acceder a order.customer.name, lo que genera un error, porque order.customer no está definido.

¿Cómo puedo suprimir este error? ¿Cuál es la mejor solución para esto?

Por supuesto, puedo definir explícitamente la estructura de orden (por ejemplo, order: { customer: {} }), pero eso no me parece agradable, especialmente cuando la estructura de datos crece a objetos anidados de varios niveles.

1
Martin Heralecký 31 oct. 2017 a las 13:56

3 respuestas

La mejor respuesta
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>

Necesitas renderizarlo condicionalmente. Dado que los datos del backend no son accesibles desde el principio, debe agregar una condición para mostrar el elemento solo cuando los datos estén listos. Ver ejemplo.

<p>Order's customer name: <span v-if="order" v-text="order.customer.name"></span></p>
3
El Danielo 31 oct. 2017 a las 11:11

Creo que puedes probar para order.customer:

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

Si order.customer no está definido, la evaluación de la expresión simplemente se detendrá en el primer término sin arrojar un error.

1
Jeremy Thille 31 oct. 2017 a las 11:02

Puede utilizar la operadora ternaria para comprobar

<p>Order's customer name: {{ order.customer?order.customer.name:'' }}</p>
0
Olufemi Ayodele 16 mar. 2020 a las 00:37