v-on call method with multiple parameters

[paglias]

When using the v-on directive this way:

v-on="click: method(param1, param2)"

It fails to parse the expression. I think because it thinks the comma marks the beginning of a new event-bound method like:

v-on="click: method(param1), event2: method2()"

This is the code, but I'm having problems replicating this in a fiddle:

  <ul>
    <li v-repeat="note: notes | filterBy status.query">
      <a v-on="click: open(notes.indexOf(note), 'a')">{{note.content}}</a>
      <input type="text" v-model="note.content" v-on="input: saveDebounced(note)"><a v-on="click: destroy($index)">x</a>
    </li>
  </ul>

and this is the console output:

[yyx990803]

Yeah it fails at open(notes.indexOf(note), 'a'). The current regex only checks 1 level deep for parens :( Will have to come up with a more robust one.

[yyx990803]

In the meantime - I'd suggest putting only the most simple logic in inline expressions, for this case it seems better to use a method handler.

[paglias]

@yyx990803 yeah I was using indexOf because the method expect an index not a whole object but it's not a big deal to change how it works.

I've noticed that inline expressions have some limitations, for example it isn't possible to do:

v-on="input: status.saved = false; saveDebounced(status.selectedNote)" because only status.saved = false is executed. I like to keep logic in inline expressions to the minimum but sometimes it's useful to avoid creating new methods just for assigning a property.

[yyx990803]

I'd always create a new method if it takes more than 1 statement. I limited inline expressions to 1 statement on purpose because I want to discourage logic in templates.

[thelinuxlich]

I think this is doable

[paglias]

@yyx990803 just for curiosity, since expressions support only a subset of js (function calls, ternary operator, variable = "value", comparison operators, do I missed any?) would it be so difficult to implement CSP support https://github.com/yyx990803/vue/issues/87?

[yyx990803]

Well I'd be happy to if there's a lightweight drop-in parser available... parsers generated by jison seems pretty bloated, and I just don't have time to write it myself.

[yyx990803]

Implemented a more robust parser to parse directives in 0.10.3. Note this only parses the structure of directive, not the expressions, so CSP is still not supported.