es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Recorrer un array utilizando AlpineJS no devuelve resultados.

30 Jul, 2023 Programación

Estoy intentando iterar a través de un array usando AlpineJS, pero por más que lo intento, no obtengo ningún resultado.

Espero que alguien que esté más familiarizado con AlpineJS pueda ayudar.

Gracias de antemano.

Y aquí está el código:

<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>
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que el problema puede estar en la forma en que estás intentando establecer el arreglo books. En tu directiva x-init, no estás estableciendo correctamente el arreglo books. En lugar de simplemente asignar los datos a books, debes usar this.books para establecer el arreglo books en la instancia de AlpineJS.

    Aquí está el código actualizado:

    <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 => this.books = data.items)">
  <template x-for="(book, index) in books" :key="index">
    <div x-text="book.volumeInfo.title"></div>
  </template>
</div>

    En la directiva x-init, ahora estamos estableciendo el arreglo books usando this.books = data.items en lugar de books = data. Y en el bucle, estamos accediendo al título usando book.volumeInfo.title en lugar de book.items.volumeInfo.title.

    Espero que esto ayude. Avísanos si tienes alguna otra pregunta.

Comments are closed.