Soy nuevo en la codificación en general, y tengo este ejercicio en el que necesito traer un solo usuario adicional de una API (con datos de imagen y nombre) cada vez que alguien hace clic en el botón. Intenté todo, desde esconderme y tratar de mostrarlos uno por uno, pero parece que no puedo encontrar la manera.
Este es mi último intento hasta ahora, estoy usando vue js y j query
marcado HTML:
<body> <div class="text-center mt-3" id="app"> <h1>Lista de usuarios</h1> <div class="container col-5 md"> <div id="box"> <div class="users p-2" v-for="item in (users.data)"> <img class="rounded-circle mt-3" v-bind:src=" item.avatar " alt="Imagen usuario" /> <p>{{ item.first_name }} {{ item.last_name }}</p> </div> <div id="newusers"> <div class="users p-2" v-for="item in (users2.data)" style="display: none" > <img class="rounded-circle mt-3" v-bind:src=" item.avatar " alt="Imagen usuario" /> <p>{{ item.first_name }} {{ item.last_name }}</p> </div> </div> </div> </div> <button class="btn btn-success mt-4" type="button" v-on:click="addUser"> Agregar nuevo usuario </button> </div>```Código JavaScript:
var userApp = new Vue({ el: "#app", data: { users: {}, users2: {}, }, methods: { addUser: function (event) { $("#newusers").append("<p>" + userApp.users2.data.first_name[0] + "</p>"); }, }, }); $.ajax({ url: "https://reqres.in/api/users", dataType: "json", success: function (data) { userApp.users = data; }, }); $.ajax({ url: "https://reqres.in/api/users?page=2", dataType: "json", success: function (data) { userApp.users2 = data; }, });No debe usar jQuery con Vue. Puedes probar con fetch
var userApp = new Vue({ el: "#app", data() { return { users: [], page: 1, perPage: 6, total: 0 } }, computed: { hasMore() { return this.total > this.users.length } }, methods: { addUser(event) { this.page++ this.getUsers(this.page, 1) }, getUsers(page, nr) { fetch("https://reqres.in/api/users?page=" + page + "&per_page=" + nr) .then(response => response.json()) .then(data => { this.total = data.total this.users = [...this.users, ...data.data] }); } }, mounted() { this.getUsers(this.page, this.perPage) this.page = this.perPage } }); <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div class="text-center mt-3" id="app"> <h1>Lista de usuarios</h1> <div class="container col-5 md"> <div id="box"> <div class="users p-2" v-for="item in (users)" :key="item.id"> <img class="rounded-circle mt-3" v-bind:src=" item.avatar " alt="Imagen usuario" /> <p>{{ item.first_name }} {{ item.last_name }}</p> </div> </div> </div> </div> <button class="btn btn-success mt-4" type="button" v-on:click="addUser" v-if="hasMore"> Agregar nuevo usuario </button> </div>