Как скрывать выпадающий список при выборе какого-либо его пункта?

Question

[richrichwx]

<template>
    <div class="sidebar">
        <button class="sidebar__button sidebar__button_info">данные о контакте</button>
        <div class="sidebar__button_status" @click="openClick()">
            {{ status}}
        </div>
        <ul class="sidebar__button_list_item">
            <li class="sidebar__button sidebar__button_list"
                v-for="item in items"
                :key="item"
                @click="changeClick(item)">
                {{item}}
            </li>
        </ul>
    </div>
</template>

<script>
export default {
  name: 'sidebar',
  data () {
    return {
      items: ['в сети', 'занят', 'отсутсвую', 'в самолете', 'в пути'],
      status: 'статус'
    }
  },
  methods: {
    openClick: function () {
      this.show = !this.show
      const a = document.getElementsByClassName('sidebar__button_status')
      if (this.show) {
        a[0].classList.add('open-list')
      } else {
        a[0].classList.remove('open-list')
      }
    },
    changeClick: function (item) {
      this.status = item
    }
  }
}
</script>

Есть блок "статус", при нажатии на него появляется список: "в сети", "занят" и т.д.
Необходимо, чтобы при выборе ответа список исчезал.
Сейчас список исчезает только при клике на блок "статус".

Comments

[DevMan]

richrichwx подсветка кода? не, не слышал!!!11адын
хинт: кнопка < / > в редакторе.

Answer 1

[0xD34F]

Метод openClick - кто вас такой мерзости научил? Срочно читаем документацию, как правильно работать с классами. Но вообще, чтобы скрывать/показывать элементы, переключать классы необходимости нет - под это дело предусмотрен специальный инструмент.

data: () => ({
  show: false,
  items: [ 'в сети', 'занят', 'отсутствую', 'в самолете', 'в пути' ],
  status: 'статус',
}),
methods: {
  selectStatus(status) {
    this.status = status;
    this.show = false;
  },
},

<div
  v-text="status"
  @click="show = !show"
></div>
<ul v-show="show">
  <li
    v-for="n in items"
    v-text="n"
    @click="selectStatus(n)"
  ></li>
</ul>

Answer 2

[Максим Тихонов]

<template>
    <div class="sidebar">
        <button class="sidebar__button sidebar__button_info">данные о контакте</button>
        <div class="sidebar__button_status" :class="{'open-list': show}" @click="show = !show">
            {{ status}}
        </div>
        <ul class="sidebar__button_list_item">
            <li class="sidebar__button sidebar__button_list"
                v-for="item in items"
                :key="item"
                @click="status = item">
                {{item}}
            </li>
        </ul>
    </div>
</template>

<script>
const items = ['в сети', 'занят', 'отсутсвую', 'в самолете', 'в пути'];
export default {
  name: 'sidebar',
  data () {
    return {
      show: false, // для реактивности
      items,
      status: 'статус'
    }
  }
}
</script>