How to hide the dropdown list when selecting any of its items?

Question

Vue.js

<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>

There is a "status" block, when you click on it, a list appears: "online", "busy", etc.
You want the list to disappear when you select an answer.
Now the list disappears only when you click on the "status" block.

Answer 1

The openClick method - who taught you such an abomination? Read the documentation on how to work with classes correctly , it is explained quite clearly.

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

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

https://jsfiddle.net/e29th1vm/1/

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>