如何在关系 vuejs 上渲染对象？

Question

这是我的laravel：

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

这是我的 vue2 代码：

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

和 v 模型：

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

它仍然呈现 company.name 但收到警告：

[Vue 警告]：渲染错误：“TypeError：无法读取未定义的属性（正在读取'名称'）”

Answer 1

正如 Estus Flask 建议的那样，

安装组件的那一刻，您还没有收到数据。

尝试使用像这样的可选链接对输入本身使用v-if指令：

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

它将检查用户是否存在，然后检查公司是否存在，然后检查名称是否存在。 如果任何不存在，它将不会呈现该元素。