Question

使用脚本标签时，Alpine.data() 中的键未定义

2022-07-05

2950

alpine.js

我有一个 Django 模板，其中包含 Alpine.js (v3.10.2) 的脚本标记：

<div x-data="product" class="product">
  ...
</div>

<script>
  document.addEventListener('alpine:init', () => {
    Alpine.data('product', () => ({
      count: 1,
      increment() {
        this.count = this.count++
      },
      decrement() {
        this.count = this.count--
      }
    }))
  })
</script>

这符合 Alpine.data() 文档。但是，这会导致错误：

Alpine Expression Error: product is not defined
Expression: "product"

当我直接在 x-data 属性中设置数据时，不会出现此问题：

<div x-data="{ count: 1 }" class="product">
  ...
</div>

我使用 defer 选项包含 alpinejs 脚本。

Answer 1

您需要返回 Alpine.js 组件（例如使用箭头语法）：

<script>
  document.addEventListener('alpine:init', () => {
    Alpine.data('product', () => ({
      count: 1,
      increment() {
        this.count++
      },
      decrement() {
        this.count--
      }
    }))
  })
</script>

Answer 2

由于 html 代码中的拼写错误，我遇到了类似的问题：

<template>
...
<template>

您可能会看到在结束 template 标签中缺少斜线，因此正确的代码应该是：

<template>
...
</template>

在这种特定情况下，错误太具有误导性，因为您可能认为涉及脚本初始化中的某种竞争条件，但它更直接。