VueJS: Adding a class to one element if a class exists on another element

Question

I'm working in VueJS. I'm trying to bind a class to one element based on an existence of a class on another element. The below is in a :for loop to print out the list.

The '#accordion-'+(index+1)) is the id of the div I want to check to see if a class exists on it.

I wrote a method and it works UNTIL I check the element's classList. Right now, I'm only doing a console log, but eventually this will return true and hopefully the class will apply.

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"));
  }
}

I find it so frustrating. I've spent a day on this without any results. Any help you can provide it would be great.

When it crashes, what error do you see?

ebbishop
– ebbishop

2020-02-04 20:08:41 +00:00
Commented Feb 4, 2020 at 20:08 — ebbishop
– ebbishop, Commented Feb 4, 2020 at 20:08
I get a "Cannot read property 'classList' of null

user581733
– user581733

2020-02-04 22:09:09 +00:00
Commented Feb 4, 2020 at 22:09 — user581733
– user581733, Commented Feb 4, 2020 at 22:09

Ahmet Zeybek · Accepted Answer · 2020-02-04 20:40:20Z

1

Here it is, you can also use this.$el as 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()
}
...

Alternative

<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()
}
...

So you can define ref as :ref="index+1" in your loop

edited Feb 4, 2020 at 20:40

answered Feb 4, 2020 at 20:16

Ahmet Zeybek

1,2241 gold badge14 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user581733 Over a year ago

OK. I'm going to give this a shot. Thank you,,,I'll get back to you :-)

user581733 Over a year ago

I apologize. I have a really stupid question. How would I call up hasClass()? Can I use this on a v-bind:class on another element? This is my "existingTopic" in use below. <div id="timeList" class="timeListDiv" :id="'tTimeDiv'+(index+1)" v-bind:class="{ieTimeList: existingTopic('#accordion-'+(index+1))}"> would I do... <div id="timeList" class="timeListDiv" :id="'tTimeDiv'+(index+1)" v-bind:class="{ieTimeList: hasClass()}">

user581733 Over a year ago

Hmmm... it's not working. I'm trying to bind a class on one element based on another having the class. Because it's dynamic, I have to check within it's own index. Thus I'm trying to call up the function on the div I want to set the class based on if it exists on another div with an id of #accordion- + the index number +1. Ugh. <div id="timeList" class="timeListDiv" :id="'tTimeDiv'+(index+1)" v-bind:class="{ieTimeList: existingTopic('#accordion-'+(index+1))}">

Collectives™ on Stack Overflow

VueJS: Adding a class to one element if a class exists on another element

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related