0

Здравствуете, уважаемые программисты. Я хочу при нажатии на кнопку вывести данные определенного пользователя, по типу: username, для начала. Данные я беру из json файла. На страницу у меня выводятся циклом все пользователи, а точнее их имена, хотелось бы чтобы при нажатии на кнопку возле пользователя вывелись определенные данные, которые есть в json файле. Вроде подробно расписал, как это сделать я не понимаю, хотелось бы услышать ваше мнение. У меня при нажатии на кнопку выводятся данные всех пользователей,а не определенного возле которого нажата кнопка. Почему я понимаю, потому что перебираю циклом, но по другому в голову не лезет((

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <div class="user" v-for="users of data" :key="users.id">
      <p class="oneuser">{{ users.name }}</p>
      <button class="info" @click="getInfo">+</button>
    </div>
    <div v-if="get">
      <div v-for="info of data" :key="info.id">
        <p>{{ info.username }}</p>
      </div>
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [],
      nameUser: "",
      email: "",
      userName: "",
      get: false,
    };
  },
  mounted() {
    this.getdata();
  },
  methods: {
    getInfo() {
      this.get = true;
    },

    async getdata() {
      const res = await fetch("https://jsonplaceholder.typicode.com/users");
      const json = await res.json();
      this.data = json;
      this.nameUser = this.data;
      console.log(this.data);
    },
  },
};
</script>
<style>
.user {
  display: flex;
  align-items: center;
  width: 300px;
  justify-content: space-between;
  border: 1px solid;
  margin-bottom: 10px;
  border-radius: 15px;
}
.info {
  height: 20px;
  border-radius: 50%;
  margin-right: 10px;
}
.oneuser {
  margin-left: 10px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.0/vue.js"></script>

1 ответ 1

0
<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <div class="user" v-for="users of data" :key="users.id">
      <p class="oneuser">{{ users.name }}</p>
      <button class="info" @click="getInfo(users.id)">+</button>
    </div>
    <div v-for="info of data" :key="info.id">
      <div v-if="get == info.id">
        <p>{{ info.username }}</p>
      </div>
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [],
      nameUser: "",
      email: "",
      userName: "",
      get: -1,
    };
  },
  mounted() {
    this.getdata();
  },
  methods: {
    getInfo(id) {
      this.get = id;
    },

    async getdata() {
      const res = await fetch("https://jsonplaceholder.typicode.com/users");
      const json = await res.json();
      this.data = json;
      this.nameUser = this.data;
      console.log(this.data);
    },
  },
};
</script>
5
  • Здравствуете, я решил скопировать ваш код, чтобы проверить как он работает, но мне выдало гору ошибок, может я что-то не то скопировал?(( 10 ноя 2022 в 12:11
  • Я кажется починил и понял, у вас просто при нажатии на кнопку выводит информацию обо всех пользователях, но только под именем рядом с которым была нажата кнопка. А мне бы хотелось, чтобы вывело информацию только об определенном человеке и только о нем, чтобы об остальных ничего не писало и так со всеми 10 ноя 2022 в 12:16
  • Тогда пусть переменная get будет равна номеру пользователя. И показывать только ту инфу, номер которой совпадает с номером пользователя. Поправил. 10 ноя 2022 в 12:35
  • всё равно он ругается в консоле не что-то( 10 ноя 2022 в 12:43
  • Всё, я во всем разобрался, спасибо вам большое 10 ноя 2022 в 12:57

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.