vue.js 2 @click on div not respond(without methods)

Question

I try change color of div by clicked on him, but the event not responded, what I'm doing wrong? here is my code

HTML:

<div class="demo" @click="attachRed != attachRed" :class="{ red: attachRed }"></div>

script: '

export default {
  data() {
    return {
      attachRed: false
}}

' style:

.demo {
  width: 100px;
  height: 100px;
  background-color: gray;
  display: inline-block;
  margin: 10px;
}
.red {
  background-color: red;
}

Community · Accepted Answer · 2021-03-05 04:01:37Z

2

It is

@click="attachRed = !attachRed

Not

@click="attachRed != attachRed

The != symbol is a test operator, and is read as "not equal," so what you have is "attachRed is not equal to attachRed." You should use the assignment operator of just = and negate the right-hand value. It should read "attachRed is assigned to NOT (!) attachRed."

edited Mar 5, 2021 at 4:01

CommunityBot

11 silver badge

answered Mar 4, 2021 at 21:25

Kick Buttowski

6,74713 gold badges39 silver badges61 bronze badges

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

2 Comments

Eden M Over a year ago

thanks! I just solved the stupid mistake:)

Kick Buttowski Over a year ago

Don't worry it happens to everybody. I am confused my answer helped you?

Collectives™ on Stack Overflow

vue.js 2 @click on div not respond(without methods)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related