关于 Alpine.js 中的异步

Question

我按照上面的 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 文档在高级章节中省略了此信息，因为它假设 reader 已经熟悉了那一点的基础知识。所以你总是必须有一个 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>

关于 Alpine.js 中的异步

About Async in Alpine.js

javascript

asynchronous

async-await

alpine.js