Как "Скрыть"/"Показать" определенный блок в списке по нажатию кнопки во Vue.js?

Question

[TjLink]

Создаю список с использованием Vue.js

Когда нажимаю "показать" то, открываются сразу все блоки!

Вопрос: Как сделать так, чтобы открывался/скрывался определённый блок по нажатию на кнопку "показать"?

Скрыто:

После нажатия на "Показать" открываются все блоки:


Код Vue.js:

<template src="../HTMLtemp/testComp.html">
</template>



<script>
export default {
data(){
return{
id : 0,
users :[{name :'TjLink', fname : 'Gog', age : 23 , city : 'Москва', id : 0}],
username : '',
userfname : '',
usernage : '',
usercity : '',
userid: '',
visible : false,
showForm : false
    }
  },
methods :{
  saveUser : function(){
      this.id++;
    this.users.push(
    {
    name : this.username,
    fname : this.userfname,
    age : this.usernage,
    city : this.usercity,
    id : this.id
    });
    this.username = '';
    this.userfname = '';
    this.usernage = '';
    this.usercity = '';
    this.userid = '';
  },
  show : function(userId){
    this.visible = !this.visible;
    console.log('ggg');
  },
  showBlock : function(){
    this.showForm = !this.showForm;
  }
}
}
</script>

HTML:

<div>
<div>
<p>UserInfo</p>
<button type="button" @click="showBlock" v-show="!showForm">Добавить новго пользователя</button>
<div v-show="showForm">
<form>
<input type="text" name="userN" v-model="username">
<input type="text" name="userName" v-model="userfname">
<input type="number" name="userName" v-model="usernage">
<input type="text" name="userName" v-model="usercity">
<button type="button" name="button" @click="saveUser">SAVE</button>
<button type="button" name="button" @click="showBlock">Готово</button>
</form>
</div>
<ul>
  <div v-for="(user, index) in users" style="border: 2px solid red; margin: 15px; width: 400px;" >
    <div style="border: 2px dotted green; margin: 15px;">
    <p style="margin: 15px;">ID пользователя : {{index}} <br/>Имя : {{user.name}}
        <br/>
        <button @click="show">Показать</button>
    </p>
  </div>
      <div v-show="visible" style="border: 2px solid black; margin: 15px;" :key="user.id">
        <p>ID : {{user.id}}</p>
        <p>Name : {{user.name}}</p>
        <p>FName : {{user.fname}}</p>
        <p>Age : {{user.age}}</p>
        <p>City : {{user.city}}</p>
      </div>
    <button type="button" name="button" @click="users.splice(index, 1)" style="margin: 15px;">Удалить пользователя</button>
  </div>

</ul>

</div>
</div>

Comments

[Иван]

Ваш код в студию, экстрасенсы в отпуске

Answer 1

[aloky]

Самый простой способ это в объект user создавать свойство типа isShow: true

Получается ты делаешь так v-if="user.isShow"
А в метод создаешь типа showUserInfo(id) { this.users[id].isShow = true }
Ну в кнопке ты получаешь id <button @showUserInfo(user.id)>Показать</button>

Comments

[TjLink]

А не могли бы вы внести изменения прям в мой код, а то я что-то не понимаю, куда что вставлять.
Т.е, как всё должно выглядеть.
Спасибо! ♥
Я новичок во Vue.js

[aloky]

saveUser : function(){
      this.id++;
    this.users.push(
    {
    name : this.username,
    fname : this.userfname,
    age : this.usernage,
    city : this.usercity,
    id : this.id
    isShow: false // add
    });
    this.username = '';
    this.userfname = '';
    this.usernage = '';
    this.usercity = '';
    this.userid = '';
  },

[Ярослав Иванов]

TjLink, зачем учить vue не зная основ js ?

[aloky]

<div v-show="user.isShow" style="border: 2px solid black; margin: 15px;" :key="user.id">
        <p>ID : {{user.id}}</p>
        <p>Name : {{user.name}}</p>
        <p>FName : {{user.fname}}</p>
        <p>Age : {{user.age}}</p>
        <p>City : {{user.city}}</p>
</div>

[aloky]

show : function(index){
   this.users[index].isShow = true
}

[aloky]

<button @click="show(index)">Показать</button>

[aloky]

и кстати, не обязательно писать так show : function(index) можно сразу show (index) { ... }

[aloky]

Слишком много мусора ....

[Anton Filippov]

зачем вы работаете на него? вы ему этим не помогаете