[Vue warn]: Error in render: "TypeError: Cannot read property 'name' of undefined"

I get the error in title if I go to deep in the object.

The input:

<input type="text" class="form-control form-control-static" v-model="property.owner.name">

The method:

fetchProperty: function () {

                window.axios.get(home_url + '/wp-json/wp/v2/properties/' + this.$route.params.id)
                    .then(function (response) {

                            this.property = {
                                title: response.data.title.rendered,
                                block: response.data.meta_fields.block,
                                type: response.data.meta_fields.type,
                                lot: response.data.meta_fields.lot,
                                delivery_date: response.data.meta_fields.delivery_date,
                                owner: response.data.meta_fields.owner
                            };


                        }.bind(this)
                    );
            },

The prop value:

53%20PM

property.owner.name is there, has a value. In fact, prints in the form.

If I change v-model to property.owner I get an [object Object] value and no error.

Then why I get the error???

Thanks in advance.

Because api calls take a small while in the background - meanwhile your component is rendered, without the required data ( which is still being loaded by axios).

Use v-if to control that you only render stuff when it’s really present.

2 Likes

Thanks LinusBorg. Awesome. Works perfect!

Thank you for awesome solutions