Home > Mobile >  How to execute multiple events on click?
How to execute multiple events on click?

Time:10-29

I want to click the button and execute this 2 expressions.

But i need to click it twice to execute both:

1.) data = true and 2.) name(data). Why it cant execute on click?

<button @click="data = true,name(data)">

CodePudding user response:

Adding a semicolon should execute both expressions on click.

<button @click="data = true; name(data)">click me</button>

CodePudding user response:

@AlexHunter it's probably best to extract this logic away to a handler function. Something like the below.

<button @click="handleClick">click me</button>

.....
// in your methods section
methods: {
  handleClick() {
    this.data = true
    this.name(data)
  }
}

if data is something you're accessing from within a v-if you can instead pass it in to the handler as below,

<button @click="handleClick(data)">click me</button>

.....
// in your methods section
methods: {
  handleClick(data) {
    // if data is false, return and don't call this.name()
    if (!this.data) return

    this.name(data)
  }
}

Without seeing more of your code I'm not sure what your exact use case is, though I feel you could perhaps simplify the above even more so.

  • Related