Alpine js 和 Tailwind 获取数据

Question

我开始学习alpine js结合tailwind。但是我不知道如何打印 json 响应的获取结果，试试这个

<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>

但 return 控制台中的错误 alpine.js:115 Alpine 错误：“类型错误：无法读取未定义的属性（读取 'inv_id'）”

有人知道如何在 div 中打印结果吗？

我的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);

                },
                ....

jsonreturn数据：

{"data":[{"inv_id":"8768768768"]}

Answer 1

问题的发生是因为你会得到一个可迭代的对象。我稍微重写了您的代码并将函数内联以显示第一个条目。如果你有一个集合，那么构建你的循环来播种每个项目。

<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>

Alpine js 和 Tailwind 获取数据

Alpine js and Tailwind fetch data

javascript

fetch-api

alpine.js