Скрытие элементов списка

Vue.component('rooms-list', { 
  template: `<div> 
      <h1 v-if="currentRoom">Вы в комнате № {{ currentRoom }}</h1> 
      <h1 v-else>Выберите комнату</h1> 
      <template v-for="room in rooms"> 
        <room-row 
          v-bind="room" 
          :current.sync="currentRoom" 
          @update-room="onUpdateRoom" /> 
      </template> 
    </div>`, 
  /** 
   * Эти свойства были переданы в этот компонент как v-bind="rooms". 
   */ 
  props: { 
    // Список всех комнат. 
    list: Array, 
    // Поле с номером текущей комнаты. 
    current: Number 
  }, 
  data() { 
    return { 
      // Для работы с переданными свойствами задаём им локальный статус. 
      rooms: this.$props.list, 
      currentRoom: this.$props.current, 
    } 
  }, 
  methods: { 
    /** 
     * Обновляем данные о комнатах. 
     * Данный метод вызывается из дочернего путем 
     * this.$emit('update-room', {...}) 
     */ 
    onUpdateRoom(room) { 
      // Ищем индекс переданной `room` комнаты в списке. 
      const roomIndex = this.rooms 
        .findIndex(item => item.id === room.id) 
 
      // Обновляем информацию о комнатах. 
      this.rooms.splice(roomIndex, 1, room) 
    } 
  }, 
}) 
 
Vue.component('room-row', { 
  template: `<div> 
      <div v-if="isActiveRoom"> 
        <button type="button" @click="cameOut">Выйти из комнаты №{{ id }}</button><br/> 
        <label><input type="checkbox" v-model="active" /> Лампочка {{ active | humanValue }}</label> 
      </div> 
      <div v-else-if="nonSelectedRoom"> 
        <button type="button" @click="comeIn">Войти в комнату №{{ id }}</button> 
      </div> 
    </div>`, 
  props: { 
    id: Number, 
    activeLamp: Boolean, 
    // Поле с номером текущей комнаты, переданный с модификатором `.sync` 
    // Модификатор обеспечит двустороннюю привязку. 
    // При изменении его в одном из компонентов, остальные компоненты, 
    // через родительский будут об этом знать незамедлительно. 
    current: Number, 
  }, 
  data() { 
    return { 
      // Определяем модель для состояния лампочки. 
      active: this.$props.activeLamp 
    } 
  }, 
  computed: { 
    /** 
     * Мы находимся в этой комнате. 
     * Отобразим лампочку и создадим возможность выйти из комнаты. 
     */ 
    isActiveRoom() { 
      return this.current === this.id 
    }, 
    /** 
     * Мы не в одной из комнат. 
     * Отобразим весь список комнат. 
     */ 
    nonSelectedRoom() { 
      return !this.current 
    } 
  }, 
  filters: { 
    humanValue(value) { 
      return !!value ? 'включена' : 'выключена' 
    } 
  }, 
  methods: { 
    /** 
     * Заходим в комнату. 
     */ 
    comeIn() { 
      // Оповещаем родительский компонент о том, 
      // что необходимо обновить данные о номере текущей комнаты. 
      this.$emit('update:current', this.id) 
    }, 
    /** 
     * Выходим из комнаты. 
     */ 
    cameOut() { 
      // Хлопаем дверью. 
      this.$emit('update:current', 0) 
      // Обновляем данные о текущей комнате в родительском компоненте. 
      // Родительский элемент в свою очередь вызовет метод, 
      // записанный как `@update-room="onUpdateRoom"` 
      this.$emit('update-room', { 
        id: this.id, 
        activeLamp: this.active 
      }) 
    }, 
  } 
}) 
 
const APP = new Vue({ 
  el: '#app', 
  data: { 
    // Наша модель. Так сказать общага ) 
    rooms: { 
      // Поле с номером текущей комнаты. 
      // По умолчанию мы никуда еще не вошли. 
      current: 0, 
      // Список всех комнат. 
      // Первое поле - это номер. 
      // Второе - отображает состояние выключателя 
      list: [{ 
          id: 1, 
          activeLamp: false 
        }, 
        { 
          id: 2, 
          activeLamp: false 
        }, 
        { 
          id: 3, 
          activeLamp: false 
        }, 
        { 
          id: 4, 
          activeLamp: false 
        }, 
        { 
          id: 5, 
          activeLamp: false 
        }, 
      ] 
    } 
  }, 
})

<div id="app"> 
  <!-- 
    Передаём данные о комнатах - v-bind="rooms" как объект. 
    Эти данные определены при инициализации App в поле `data: {...}`. 
    Эта запись равнозначна записи 
      :current="rooms.current" :list="rooms.list" 
    НО: изменение объекта или массива внутри дочернего компонента 
    будет влиять на состояние родителя. 
  --> 
  <rooms-list v-bind="rooms"></rooms-list> 
  <pre>{{ rooms }}</pre> 
</div> 
 
<script src="https://cdn.jsdelivr.net/npm/vue"></script>