Alpine表达式错误:未定义createFormComponent

Question

我在.NET Core 6 MVC项目中使用Alpine JS。我已经从加载了alpine js文件https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js。然后我在Home/Index.cshtml文件中添加了以下代码。

<form id="myForm"
x-data="createFormComponent()" 
x-on:submit.prevent="onSubmit">
<input id="email" type="text" name="email" 
x-model="email" />
<span class="error" style="display: none"
x-show="error"
x-text="error"
></span>
<button type="submit">Submit</button>
</form>
@section Scripts {
<script>
(function () {
'use strict';
window.createFormComponent = function () {
return {
email: '',
error: '',
onSubmit($event) {
this.error = !this.email 
? 'You must enter an email address' 
: '';
},
};
};
})();
</script>
}

但当我在浏览器中访问页面时，它总是抛出错误"；Alpine表达式错误：createFormComponent未定义"；。我试着把它放进一个js文件并加载它。还试着在alpine:init-event中定义组件。它们都不起作用。在IIS提供的纯html文件中也可以使用相同的代码。我不确定这里出了什么问题。有人能帮忙吗。

Answer 1

请确保在_Layout.cshtml或当前页面@section Scripts {...}中添加js，如下所示：

<script src="https://unpkg.com/alpinejs" defer></script>

注意：必须添加HTMLdefer属性。