单击事件带来单个用户的问题

Question

我在一般编码方面是新手，我有这个练习，每次有人点击按钮时，我需要从 API（具有名称和图像数据）中带来一个额外的用户。我尝试了所有的方法，从隐藏到试图一个一个地展示它们，但我似乎找不到办法。

这是我目前为止的最新尝试，我使用的是 vue js 和 j 查询

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

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;
  },
});

Answer 1

你不应该在 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>

单击事件带来单个用户的问题

Problem with click event to bring a single user

javascript

jquery

for-loop

onclick

vue.js