CODEWITHSUNDEEP
javascriptvue.js
kycle le
kycle le

Reputation: 43

How to change click event dynamically in VueJS

When the B component finishes loading, I send an "emit" event to the A component via EventBus.

And when event received from A component is "on", it changes the value of specific data to true.

The value is registered in computed and can only be used with "a tag" if the value is true.

But actually the value changes to true but the click event still returns "return false;"

How to make click event behave dynamically in VueJS?

B Component

...
this.$EventBus.$emit("Loading");
...

A Component

<template>
    <a href="javascript:void(0)" @click="completed ? btnFinish : 'return false;'">Complete</a>
</template>
<script>
    data() {
        return {
            loading: false,
        }
    },
    mounted() {
        this.$EventBus.$on('Loading', ()=>{
            this.loading = true;
        });
    },
    computed: {
        completed() {
            return this.loading
        }
    }
</script>

Upvotes: 2

Views: 4707

Answers (2)

Mustafa yıldiz
Mustafa yıldiz

Reputation: 375

there is another way first, find button from the id

 const iButton = document.getElementById('buttonId');
 iButton.onclick = newmethod

Upvotes: 0

skirtle
skirtle

Reputation: 29092

I think you've misunderstood what this click listener is doing:

@click="completed ? btnFinish : 'return false;'"

Firstly, the 'return false;' part is doing nothing but filling the space after the colon. You could just as easily write null, or change it to an && instead of a ?:.

Next up, the value for an @ listener can either be a function or an expression. So for example, something like this would be passing a function:

@click="btnFinish"

When you pass a function it will be treated as the handler for the event.

However, that isn't what you're doing. You're passing an expression. When you pass an expression it gets wrapped in a function behind the scenes by Vue. So when you write something like this:

@click="completed ? btnFinish : 'return false;'"

Vue will compile that down to a listener function like this:

function ($event) {
  return completed ? btnFinish : 'return false;'
}

Note that btnFinish refers to a method but it doesn't invoke it. So to get this working we need to put in the parentheses:

@click="completed ? btnFinish() : 'return false;'"

Or even better:

@click="completed && btnFinish()"

Or better still, move the whole thing into a method:

@click="onClick"

methods: {
  onClick () {
    if (this.completed) {
      this.btnFinish()
    }
  }
}

Upvotes: 3

Related Questions