Vue - показать/скрыть элемент, генерируемый v-for

158

20 января 2022, 04:00

Какой самый лучший в VUE способ изменять видимость div в элементе li, который генерируется v-for ? Проблема в том, что приходят на ум какие то уж очень избыточные решения, или решения из нативного js с перебором нод. Проблема в том, что все везде будет одинаковым, и при стандартном решении все li будут менять состояние одновременно.

 <li :key="message.id" v-for="message in getMessages" v-on:click="openMessage($event)">
                <p>{{ message.title }} ({{ message.name }}) - {{ getDate(message.created_at) }}</p>
                <div class="show">
                <p>{{ message.email }}</p>
                <p>{{ message.phone }}</p>
                <p>{{ message.message }}</p>
                </div>
            </li>

Answer 1

Предлагаю такой вариант - хранить состояние элемента списка в его объекте. При этом нет необходимости добавлять это в передаваемые данные. Добавим свойство hide уже при создании страницы и так, что оно будет реактивным. Для примера элементы исчезают по клику:

new Vue({ 
  el: "#app", 
  data: { 
    list: [ 
      { id: 1, text: "text" }, 
      { id: 2, text: "another text"}, 
      { id: 3, text: "one more text"}, 
      { id: 4, text: "last text" } 
    ] 
  }, 
  methods: { 
  	change: function(id){ 
    	this.list.forEach(i => i.id === id ? i.hide = true : true) 
    } 
  }, 
  created(){ 
  	this.list.map(item => Vue.set(item, 'hide', false) ) 
  } 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> 
<div id="app"> 
  <ul> 
    <li v-for="item in list" @click="change(item.id)" v-show="!item.hide"> 
     {{item.text}} 
    </li> 
  </ul> 
</div>