@TjLink

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

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

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

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

Скрыто:
5b4354763c64b061003187.png
После нажатия на "Показать" открываются все блоки:
5b43549f75318002754319.png

Код 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>
  • Вопрос задан
  • 5151 просмотр
Решения вопроса 1
aloky
@aloky
js
Самый простой способ это в объект user создавать свойство типа isShow: true

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы