Alpine.js新手请求数据后访问嵌套对象遇属性未定义错误

问题根源 #

• 方法名称不匹配：HTML中x-init="initData()"调用的方法，在JS的data函数里定义的是data()，导致请求根本没执行，user一直是初始的空字符串，自然无法访问user.company.name。
• 初始值类型错误：user初始设为''（字符串），字符串没有company属性，即使请求执行了，在响应返回前访问嵌套属性也会报错。
• 异步请求未完成时的渲染风险：即使请求正常触发，在API响应返回前，user还未被赋值为包含company的对象，直接访问嵌套属性会因user.company为undefined而报错。

修正后的代码 #

JS代码 #

function data() {
    return {
        // 初始化为空对象，避免字符串类型导致的属性访问错误
        user: {},
        // 方法名与x-init调用保持一致，确保请求能触发
        initData() {
            fetch('https://jsonplaceholder.typicode.com/users/1')
                .then(response => response.json())
                .then(json => this.user = json)
        },
    }
}

HTML代码（两种可选方案） #

方案一：使用可选链操作符（推荐）

用?.处理属性不存在的情况，避免报错：

<div x-data="data()" x-init="initData()">
  <span x-text="user.company?.name"></span>
</div>

方案二：条件渲染

通过x-if判断user.company存在后再渲染内容：

<div x-data="data()" x-init="initData()">
  <span x-if="user.company" x-text="user.company.name"></span>
</div>

内容的提问来源于stack exchange，提问作者Phill