How can I render an object on relation vuejs?-CodePudding

This is my laravel:

$user->load('company', 'status', 'role');
return responseData($user);

This is my vue2 code:

axios.get(`http://localhost:81/admin/users/get/${this.$route.params.id}`)
        .then(response => {
            this.user = response.data
        });

And v-model:

<input type="text" placeholder="Company" v-model="user.company.name">

It still render company.name but get warning:

[Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'name')"

CodePudding user response：

As Estus Flask suggests,

The moment your component is mounted, you didn't receive the data yet.

Try to use a v-if directive on the input itself using optional chaining like this :

<input v-if="user?.company?.name" type="text" placeholder="Company" v-model="user.company.name">

It will check if user exists, then if company exists, then if name exists. If any doesn't exist it will not render the element.