Как добавить класс в метод - VUE.js

Question

Основной вопрос, но я все еще не могу понять, как добавить дополнительный класс, основанный на @click. Я все еще получаю сообщение об ошибке: не удается прочитать свойство "добавить" из неопределенного "

methods: {
    hideItems() {

        document.getElementsByClassName('sold').classList.add('hide')
       }
    }

Answer 1

getElementsByClassName return HTMLCollection, поэтому вам нужно перебрать эту коллекцию.

, которая должна это сделать:

methods: {
    hideItems() {
        const items = document.getElementsByClassName('sold');

        for(item of items){
           item.classList.add('hide');
         }
       }
    }

Answer 2

Вы можете добавить свойство :class="{ hide: hidden }" для вашего элемента, где hidden - логическое свойство компонента Vue.Это переключит класс hide на элемент.

new Vue({
  el: "#app",
  data() {
    return {
      hidden: false,
    };
  },
  methods: {
    toggle() {
      this.hidden = !this.hidden;
    },
  },
});

.hide {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="toggle">
  Toggle visibility
  </button>
  <div :class="{ hide: hidden }">
    Hello
  </div>
</div>