How to change click event dynamically in VueJS

Question

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>

How do you know it 'returns "return false;"'? What is btnFinish? — skirtle
– skirtle, Commented Oct 18, 2019 at 2:36
btnFinish () is a method to operate. If "return false;", nothing happens when clicked, but console.log () is shown by default if it works as a method. So, even if this.loading is changed to true, the click event still returns "return false;". — kycle le
– kycle le, Commented Oct 18, 2019 at 2:37

skirtle · Accepted Answer · 2019-10-18 02:44:54Z

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

Mustafa yıldiz · Accepted Answer · 2022-03-23 19:31:28Z

0

there is another way first, find button from the id

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

answered Mar 23, 2022 at 19:31

Mustafa yıldiz

4053 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to change click event dynamically in VueJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related