Laravel Precognition 搭配 Alpine.data() 报错$form未定义求助

问题原因 #

Alpine.data()定义的组件拥有独立作用域，Laravel Precognition注入的$form魔法属性不会自动进入该作用域；而直接在x-data中定义时，上下文属于全局范围，因此能正常访问$form。

解决方案 #

在Alpine.data()的组件函数中，通过参数注入获取$form，并挂载到组件的响应式数据中：

1. 定义组件时注入$form #

Alpine.data('loginForm', ($form) => ({
    // 将$form挂载到组件对象
    form: $form,

    init() {
        // 初始化Precognition表单
        this.form = $form('POST', '/login', {
            email: '',
            password: '',
            remember: false
        });
    },

    submit() {
        this.form.submit();
    }
}));

2. 模板中使用组件 #

<div x-data="loginForm">
    <input type="email" x-model="form.email" />
    <span x-text="form.errors.email"></span>

    <input type="password" x-model="form.password" />
    <span x-text="form.errors.password"></span>

    <button type="button" x-on:click="submit()">登录</button>
</div>

注意事项 #

• 若表单通过Precognition的useForm钩子创建，务必在组件的init方法中初始化，不要直接在组件顶层对象赋值，避免响应式失效。
• 确认Laravel Precognition脚本在Alpine.js之后正确引入。

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