invoking event handler with args evokes access to the event object

[xkxx]

With a setup like this:

  <div v-on="click: dismiss">
      <ul>
          <li v-repeat="choices" v-text="$value" v-on="click: selectChoice(this.$value)"></li>
      </ul>
  </div>

since selectChoice is invoked with argument this.$value, it loses access to the event object. as a result, if it needs to stop event from propagating, it can't.

Is there currently a solution to this problem?

[jcaxmacher]

You could do something like this:

<div id="main">
    <div v-on="click: dismiss">
        <h3>Click Something</h3>
        <ul>
            <li v-repeat="choices" v-text="$value" v-on="click: selectChoice">
            </li>
        </ul>
    </div>
    <h3>Message</h3>
    <p v-text="mainMessage"></p>
    <p v-text="selectMessage"></p>
</div>

new Vue({
    el: '#main',
    data: {
        choices: ['hi', 'bye', 'g\'day']
    },
    methods: {
        dismiss: function() {
            this.selectMessage = '';
            this.mainMessage = 'Dismissed';            
        },
        selectChoice: function(e) {
            e.stopPropagation();
            this.selectMessage = e.srcElement.innerText;
            this.mainMessage = '';
        }
    }
});            

That will get it working for you now, if you're using the dev branch with commit 835dd0e (See #161). But, there should probably be a way to invoke handlers with expressions using v-on AND get the event object.

[xkxx]

That's what I use atm, but it's an ugly hack. It'd be more elegant to be be able to write something like selectChoice(this, e).

[yyx990803]

you can get access to this as e.targetVM:

selectChoice: function (e) {
    e.stopPropagation();
    // do something with `e.targetVM.$value`
}

Basically, if you have logic that needs more than one expression, put it in a method.

[jcaxmacher]

Every time I miss something like this, I think "I don't remember that being in the docs". So, I go look and.... of course it's there, right in the first paragraph :)