关于Alpine.js中的异步

Question

https://alpinejs.dev/advanced/async

按照上面的URL，我试了一下，结果什么都没有出现。

问题出在哪里？

<script defer src="https://unpkg.com/alpinejs@3.9.3/dist/cdn.min.js"></script>
<!-- 〇 -->
<h1 x-data="{ message: 'I ❤️ Alpine' }" x-text="message"></h1>

<!-- × -->
<span x-text="getLabel()"></span>
<script>
  function getLabel() {
    return 'Hello World!'
  }
</script>

<!-- × -->
<span x-text="await getLabel()"></span>
<script>
  async function getLabel() {
    let response = await fetch('...')
    return await response.text()
  }
</script>

Answer 1

Alpine.js文档在高级章节中省略了这些信息，因为它假定读者在这一点上已经熟悉了基础知识。因此，要激活x-data directive组件，始终必须有一个Alpine.js。如果您没有任何反应数据，只需在元素(或任何父元素)上使用空的x-data属性。

<span x-data x-text="await getLabel()"></span>
<script>
  async function getLabel() {
    let response = await fetch('...')
    return await response.text()
  }
</script>