<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js"></script>
<div x-data="info">
<span x-text="data"></span>
</div>
<div x-data="info">
<span x-text="data"></span>
</div>
<script>
let info ={
data: "hello"
}
document.addEventListener("alpine:init", () => {
info = Alpine.reactive(info)
Alpine.data("info", () => info);
});
</script>以上代码给出以下错误:
如何解决该问题并重用 AlpineJS 数据？
最佳答案
它不起作用，因为每个 x-data 都会重新启动其表达，意味着将魔法、Alpine.data 注入(inject) x-data 结果中。在您的情况下，两个 x 数据引用同一对象“info”。该信息将启动两次，第二次注入(inject)“$nextTick”魔法时失败。解决方案是让 x-data 引用它自己的根对象，将公共(public)“info”分配给它们的属性。这是修改后的版本:
<head>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.js"></script>
</head>
<body>
<div x-data="first">
<span x-text="info.data"></span>
</div>
<div x-data="second">
<span x-text="info.data"></span>
</div>
<script>
let first = {}
let second = {}
let info = {
data: "hello"
}
document.addEventListener("alpine:init", () => {
info = Alpine.reactive(info)
first.info = second.info = info
setTimeout(() => {
info.data = "world"
}, 1000)
});
</script>
</body>关于javascript - 如何复用AlpineJs数据？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69290431/