如何在方法中添加类-VUE.js

Question

基本问题，但是我仍然无法弄清楚如何基于@click添加额外的类。我仍然收到错误：无法读取未定义的属性“添加”。

methods: {
    hideItems() {

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

Answer 1

您可以在元素上添加: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>

Answer 2

getElementsByClassName返回HTMLCollection，因此您需要遍历该集合。

应该这样做：

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

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