<div x-data="{ posts: [], fetchPosts() { 
        fetch('https://jsonplaceholder.typicode.com/posts')
            .then(response => response.json())
            .then(data => { this.posts = data; });
    } 
}" x-init="fetchPosts()">
    <h2>Posts</h2>
    <ul>
        <template x-for="post in posts" :key="post.id">
            <li>
                <h3 x-text="post.title"></h3>
                <p x-text="post.body"></p>
            </li>
        </template>
    </ul>
</div>

<div x-data="{ posts: [], error: '', fetchPosts() { 
        fetch('https://jsonplaceholder.typicode.com/posts')
            .then(response => {
                if (!response.ok) throw new Error('Network response was not ok');
                return response.json();
            })
            .then(data => { this.posts = data; })
            .catch(error => { this.error = error.message; });
    } 
}" x-init="fetchPosts()">
    <h2>Posts</h2>
    <template x-if="error">
        <p x-text="`Error: ${error}`" style="color: red;"></p>
    </template>
    <ul>
        <template x-for="post in posts" :key="post.id">
            <li>
                <h3 x-text="post.title"></h3>
                <p x-text="post.body"></p>
            </li>
        </template>
    </ul>
</div>

<div x-data="{ posts: [], loading: true, fetchPosts() { 
        this.loading = true;
        fetch('https://jsonplaceholder.typicode.com/posts')
            .then(response => response.json())
            .then(data => { this.posts = data; })
            .finally(() => { this.loading = false; });
    } 
}" x-init="fetchPosts()">
    <template x-if="loading">
        <p>Loading...</p>
    </template>
    <ul>
        <template x-for="post in posts" :key="post.id">
            <li>
                <h3 x-text="post.title"></h3>
                <p x-text="post.body"></p>
            </li>
        </template>
    </ul>
</div>

<div x-data="{ posts: [], userId: 1, fetchPosts() { 
        fetch(`https://jsonplaceholder.typicode.com/posts?userId=${this.userId}`)
            .then(response => response.json())
            .then(data => { this.posts = data; });
    } 
}" x-init="fetchPosts()">
    <label>
        User ID:
        <input type="number" x-model="userId" @change="fetchPosts()">
    </label>
    <ul>
        <template x-for="post in posts" :key="post.id">
            <li>
                <h3 x-text="post.title"></h3>
                <p x-text="post.body"></p>
            </li>
        </template>
    </ul>
</div>

<div x-data="{ posts: [], page: 1, fetchPosts() { 
        fetch(`https://jsonplaceholder.typicode.com/posts?_page=${this.page}&_limit=5`)
            .then(response => response.json())
            .then(data => { this.posts = data; });
    } 
}" x-init="fetchPosts()">
    <button @click="page > 1 ? page-- : page; fetchPosts()">Previous</button>
    <button @click="page++; fetchPosts()">Next</button>
    <ul>
        <template x-for="post in posts" :key="post.id">
            <li>
                <h3 x-text="post.title"></h3>
                <p x-text="post.body"></p>
            </li>
        </template>
    </ul>
</div>

<div x-data="{ posts: [], async fetchPosts() { 
        try {
            const response = await fetch('https://jsonplaceholder.typicode.com/posts');
            this.posts = await response.json();
        } catch (error) {
            console.error('Error fetching posts:', error);
        }
    } 
}" x-init="fetchPosts()">
    <h2>Posts</h2>
    <ul>
        <template x-for="post in posts" :key="post.id">
            <li>
                <h3 x-text="post.title"></h3>
                <p x-text="post.body"></p>
            </li>
        </template>
    </ul>
</div>