Empiezo a aprender a combinar los js alpinos con el viento de cola. Pero no sé cómo imprimir el resultado de obtención de la respuesta json, intente con esto
<div x-data="orderSearch()" class="container mx-auto py-6 px-4" > <div class="flex border-2 border-gray-200 rounded"> <input type="text" class="px-4 py-2 w-100 uppercase" placeholder="Search" name="orderidSearch" x-model="orderidSearch"> <button @click="fetchFulfillment()" class="px-2 py-1 text-white bg-blue-500 rounded hover:bg-green-600">Cari Fulfillment</button>pero devuelve el error en la consola alpine.js: 115 Error de Alpine: "Error de tipo: no se pueden leer las propiedades de undefined (leyendo 'inv_id')"
¿Alguien sabe cómo imprimir el resultado dentro de div?
Mi función js:
function orderSearch() { return { orderidSearch: '', // other default properties orders: [], fetchOrders() { this.isLoading = true; fetch(`check.php?order_id=${this.orderidSearch}`) .then(res => res.json()) .then(data => { this.isLoading = false; this.orders = data.orders; console.log(data); }); console.log(this.orders); }, ....json devuelve datos:
{"data":[{"inv_id":"8768768768"]}El problema ocurre porque obtendrá un objeto iterable. Reescribo su código un poco y pongo la función en línea para mostrar la primera entrada. Si tiene una colección, cree su ciclo para sembrar cada elemento.
<div class="container mx-auto py-6 px-4" x-data="{ orders: null, isLoading: false, orderSearch() { this.isLoading = true; fetch(`check.php?order_id=${this.orderidSearch}`) .then((response) => response.json()) .then((json) => this.orders = json); } }" x-init="orderSearch()"> <p x-text="orders[0].inv_id"></p> </div>