我一般是編碼新手，我有這個練習，每次有人點擊按鈕時，我都需要從 API（帶有名稱和影像資料）中帶來一個額外的用戶。我嘗試了從隱藏到嘗試一個一個地展示它們的所有方法，但我似乎找不到方法。這是我到目前為止的最后一次嘗試，我正在使用 vue js 和 j queary
`html code`
<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>```
`js code`
```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;
},
});```
uj5u.com熱心網友回復：
你不應該在 Vue 中使用 jQuery。你可以試試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>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/395262.html
標籤：javascript 查询 Vue.js for循环 点击
上一篇：固定滑塊的標題