Здравствуете, уважаемые программисты. Я хочу при нажатии на кнопку вывести данные определенного пользователя, по типу: 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>