使用 AlpineJS returns 遍历数组没有结果

Question

我正在尝试使用 AlpineJS 遍历一个数组，但我无法得到任何输出。

我希望更熟悉 AlpineJS 的人能够提供帮助。

提前致谢。

这是代码：

<script>
function alpineInstance() {
  return {
    books: []
  }
}
</script>

<div 
x-data="alpineInstance()"
x-init="fetch('https://www.googleapis.com/books/v1/volumes?q=Alpine')
  .then(response => response.json())
  .then(data => books = data)">
  <template x-for="(book, index) in books" :key="index">
    <div x-text="book.items.volumeInfo.title"></div>
  </template>
</div>

Answer 1

看来您对 API return 中的数据类型有错误的认识。复制要传递给 fetch 函数的 URL 并将其粘贴到浏览器中。希望您很快就会发现此端点不是 return 数组，它 return 是一个对象！

function alpineInstance() {
  return {
    // we'll set our data to hold an object
    bookResponse: {}
  }
}

<html>

<head>
  <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>

<body>
  <div x-data="alpineInstance()" x-init="fetch('https://www.googleapis.com/books/v1/volumes?q=Alpine')
  .then(response => response.json())
  .then(data => bookResponse = data)">
    <!-- instead of mapping over an object, which will throw an error, we'll map over bookResponse.items !-->
    <template x-for="(item, index) in bookResponse.items" :key="index">
    <div x-text="item.volumeInfo.title"></div>
  </template>
  </div>
</body>

</html>

使用 AlpineJS returns 遍历数组没有结果

Looping through an array using AlpineJS returns no results

javascript

arrays

alpinejs