How to suppress "Undefined" errors before fetching data in Vue

Question

I have a simple page where I display some data that are fetched from the server.

Template:

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

Everything works just fine but in browser's console there is an error: "Cannot read property 'name' of undefined". Apparently the problem is that it takes some time to fetch the order data from the server and meanwhile it tries to access order.customer.name, which results in error, because order.customer is undefined.

How can I suppress this error? What's the best solution to this?

Of course, I can explicitly define the order structure (eg. order: { customer: {} }), but that doesn't seem nice to me, especially when the data structure grows to several-level-nested objects.

in typescript you would have order.customer?.name but in JS I'm afraind you'll have something "ugly" in the end anyway. — Elmer Dantas
– Elmer Dantas, Commented Oct 31, 2017 at 11:03

El Danielo · Accepted Answer · 2017-10-31 11:11:42Z

3

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>

You need to render it conditionally. Since data from the backend is not accessible from the very beginning, you should add a condition to display element only when the data is ready. See example.

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

edited Oct 31, 2017 at 11:11

answered Oct 31, 2017 at 11:02

El Danielo

7801 gold badge8 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jeremy Thille · Accepted Answer · 2017-10-31 11:02:48Z

1

I think you can test for order.customer :

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

if order.customer is not defined, the expression evaluation will simply stop at the first term without throwing an error.

answered Oct 31, 2017 at 11:02

Jeremy Thille

26.4k12 gold badges48 silver badges64 bronze badges

Comments

Olufemi Ayodele · Accepted Answer · 2020-03-16 00:37:27Z

0

You can use ternary operator to check

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

answered Mar 16, 2020 at 0:37

Olufemi Ayodele

4073 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to suppress "Undefined" errors before fetching data in Vue

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related