Question

我正在使用VueJS。我试图根据一个元素在另一个元素上的存在将一个类绑定到一个元素。下面是一个：for循环，用于打印出列表。

'#accordion-'+(index+1))是我要检查的div的ID，以查看其上是否存在类。

我编写了一个方法，直到我检查了元素的classList，它才起作用。现在，我只在做一个控制台日志，但是最终它将返回true，并希望该类适用。

methods: {
  existingTopic: function(lcDivID) {
    const element = document.querySelector(lcDivID);
    console.log(element); //It gives me the element.
    /* The below is where it crashes */
    console.log(element.classList.contains("collapsePanelExistingTopic"));
  }
}

我觉得很沮丧。我花了一天没有任何结果。您可以提供的任何帮助都会很棒。

Answer 1

在这里，您也可以将this.$el用作document

...
methods: {
    hasClass() {
      const element = this.$el.querySelector('h1')
      if (element.classList.contains('your-class-here')) {
        console.log(true)
        this.$el.querySelector('anotherelement').classList.add("your-another-class");
      } else {
        console.log(false)
    }
  }
},
mounted() {
  this.hasClass()
}
...

替代

<h1 class="mb-5 fs-lg" ref="myElement">Sign up</h1>
...
methods: {
  hasClass() {
    const element = this.$refs.myElement
    if (element.classList.contains('mb-5')) {
      console.log(true)
      this.$el.querySelector('anotherelement').classList.add("your-another-class");
    } else {
      console.log(false)
    }
  }
},
mounted() {
  this.hasClass()
}
...

因此您可以在循环中将ref定义为:ref="index+1"

VueJS：如果一个类存在于另一个元素上，则将一个类添加到一个元素

1 个答案: