当使用脚本标记时，Alpine.data()中的 Key未定义

Question

我有一个Django模板，其中包含一个alpinee .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>