Alpine Expression Error: createFormComponent is not defined

Question

我在 .NET Core 6 MVC 项目中使用 Alpine JS。我已经从 https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js 加载了 alpine 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 Expression Error: createFormComponent is not defined”。我试图将它放入一个js文件并加载它。还尝试在 alpine:init 事件中定义组件。 None 他们成功了。相同的代码适用于 IIS 提供的纯 html 文件。我不确定这里出了什么问题。谁能帮帮忙

Answer 1

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

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

注意：HTML必须添加defer属性。

Alpine Expression Error: createFormComponent is not defined

Alpine Expression Error: createFormComponent is not defined

asp.net-core-mvc

asp.net-core

alpine.js