Assign Vue Event Handler to Method's Return Value

Question

Problem: I need to set a vue component's event handler equal to the return value of another method.

This JavaScript runs on click.

<!-- pseudo code -->
<input type="button" @click="count + 1">

Method is invoked on click.

<!-- pseudo code -->
<input type="button" @click="addToCount">
...
<script>
function addToCount () {
    count + 1
}
</script>

But this will invoke getAddToCountHandler on click, not addToCount.

<!-- pseudo code -->
<input type="button" @click="getAddToCountHandler()">
...
<script>
function getAddToCountHandler () {
    return function addToCount () {
        count + 1
    }
}
</script>

The following is closer to what I am trying to do, with some variables stored in a closure.

<!-- pseudo code -->
<input type="button" @click="getHandler(0)">
...
<script>
function getHandler (param) {
    let storedParam = param
    return function () {
        storedParam += 1
        console.log(storedParam)
    }
}
</script>

Boussadjra Brahim · Accepted Answer · 2020-04-02 18:38:35Z

1

You should run the return function as follows by adding () like :

<input type="button" @click="getAddToCountHandler()()">

or

function getAddToCountHandler () {
    return function addToCount () {
        count + 1
    }()
}

let app=new Vue({
  el: "#app",
  data:function() {
    return {
      count: 0
    }
  },
  methods: {
   getAddToCountHandler() {
   let that=this;
      return function addToCount() {
      console.log(that.count)
        that.count =that.count+1
      }()
    }

  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input type="button" @click="getAddToCountHandler()" value="increment" /> {{count}}
</div>

edited Apr 2, 2020 at 18:38

answered Apr 1, 2020 at 20:29

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

3 Comments

Dylan Landry Over a year ago

Sorry, Boussadjra, my question was incomplete. I've edited it to add context for you.

Boussadjra Brahim Over a year ago

but what' the exact issue ?

Dylan Landry Over a year ago

Looking at the last script I added to my question, there is a closure with state I want to maintain throughout the lifespan of the click handler. Given your answer, that closure and handler is recreated, and the closure's state reset, each time the button is clicked.

Collectives™ on Stack Overflow

Assign Vue Event Handler to Method's Return Value

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