Alpine JS - 错误：未捕获类型错误：无法读取未定义的属性（读取'_x_refs'）

Question

Hi I am using CDN link for alpine: 'https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.9.0/cdn.min.js'您好，我正在使用 alpine 的 CDN 链接：“https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.9.0/cdn.min.js”

and I did this我做了这个

And in live server I am getting this error in console: Check Screenshot for error在实时服务器中，我在控制台中收到此错误： Check Screenshot for error

Please tell me what is the issue.请告诉我问题是什么。

Uncaught TypeError: Cannot read properties of undefined (reading '_x_refs')
    at Function.Xr.inline (cdn.min.js:5:32320)
    at u (cdn.min.js:5:1964)
    at cdn.min.js:5:4403
    at Array.forEach (<anonymous>)
    at cdn.min.js:5:4392
    at M (cdn.min.js:5:3335)
    at cdn.min.js:5:4361
    at Xt (cdn.min.js:5:1687)
    at S (cdn.min.js:5:4353)
    at cdn.min.js:5:3723
Xr.inline @ cdn.min.js:5
u @ cdn.min.js:5
(anonymous) @ cdn.min.js:5
(anonymous) @ cdn.min.js:5
M @ cdn.min.js:5
(anonymous) @ cdn.min.js:5
Xt @ cdn.min.js:5
S @ cdn.min.js:5
(anonymous) @ cdn.min.js:5
(anonymous) @ cdn.min.js:1
Je @ cdn.min.js:1

The code:代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.9.0/cdn.min.js'
        integrity='sha512-91GIHlafcLQRUuQqlBCEF/qOecSTcBkSsaPWP3jgstLpwZ8orjgDlPgJshIq+x9t8wFcrGEjUKSMRN3K5ibq6Q=='
        crossorigin='anonymous'></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css"
        integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <header x-ref="header">
        header code here
    </header>
</body>
</html>

Answer 1

You have to add thex-data attribute to an Alpine.js component even without any data definitions, otherwise Alpine.js will ignore it.即使没有任何数据定义，您也必须将x-data属性添加到 Alpine.js 组件，否则 Alpine.js 将忽略它。

<header x-data="{}" x-ref="header">
    header code here
</header>

Also add the defer attribute to Alpine.js <script> tag or move it t the end of <body> to solve the warning message.同时在 Alpine.js 的<script>标签中添加defer属性或将其移至<body>的末尾以解决警告信息。

Alpine JS - 错误：未捕获类型错误：无法读取未定义的属性（读取'_x_refs'）

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-02-16 08:35:25

Alpine JS - 错误：未捕获类型错误：无法读取未定义的属性（读取'_x_refs'）

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-02-16 08:35:25

解决方案1
1 已采纳 2022-02-16 08:35:25