Основной вопрос, но я все еще не могу понять, как добавить дополнительный класс на основе @click. Я все еще получаю сообщение об ошибке: Не удается прочитать свойство «добавить» неопределенного»
methods: {
hideItems() {
document.getElementsByClassName('sold').classList.add('hide')
}
}

Вы можете добавить свойство :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>getElementsByClassName return HTMLCollection, поэтому вам нужно перебрать эту коллекцию.
это должно сделать это:
methods: {
hideItems() {
const items = document.getElementsByClassName('sold');
for(item of items){
item.classList.add('hide');
}
}
}
Это правильный ответ