enable implicit event (v-on) and var (v-bind) declarations: e.g. <a @click :title>hello!</a>

[frudman]

What problem does this feature solve?

make template html more DRY by reducing simple component (self-evident?) definitions.

Many times I find that I declare event methods using the same name as the underlying event, such as

<a @click=click @mouseover=mouseover :title=title>hello</a>

(where click and mouseover are of course defined as methods for the component, and title is declared within the data() object).

A cleaner way to do this (imho, and in keeping with javascript's shorthand object notation: e.g. const x = { a, b, c }), a cleaner way may look like this:

<a @click @mouseover :title>hello</a>

This concept could also be extended to binding of variables & props (e.g. :title=title becomes :title).

What does the proposed API look like?

the API would not (should not need to) be changed as this would affect only the initial parsing of a template's html.

I suspect the parts of the code to be modified would be here and here but those were too involved for me to attempt.

[posva]

Duplicate of #5835

[frudman]

@posva I see that the other issues referenced v-bind not events. The arguments are likely valid for properties (but that's neither here nor there) but events are not mentioned in those requests (or did I miss that?) and I submit to you that the boolean-ness of those is not applicable (so argument becomes less relevant, for events).

If so, I'd like to propose that for events (at least, since the object notation does cannot apply since it's a function/method) maybe we consider re-opening this?

As incentive, I went ahead and forked the source and added only a few lines to make this possible, as per below, in the html-parser.js module (inside the handleStartTag function). Here's a brief snippet:

    const l = match.attrs.length
    const attrs = new Array(l)
    for (let i = 0; i < l; i++) {
      const args = match.attrs[i]
      const value = args[3] || args[4] || args[5] || ''
      const shouldDecodeNewlines = tagName === 'a' && args[1] === 'href'
        ? options.shouldDecodeNewlinesForHref
        : options.shouldDecodeNewlines

      // Frederic Rudman modification: enable events to be implicitly defined
      const FR_NAME = args[1]; // from original (see below)
      let FR_ATTR = decodeAttr(value, shouldDecodeNewlines); // from original (see below)

      if (FR_ATTR.length === 0) {
          if (FR_NAME.length > 1 && (FR_NAME[0] === '@')) {
              const hasModifiers = FR_NAME.indexOf('.');
              FR_ATTR = FR_NAME.substring(1, (hasModifiers > -1) ? hasModifiers : FR_NAME.length);
          }
      }

      attrs[i] = {
        name: FR_NAME, // args[1],
        value: FR_ATTR, // decodeAttr(value, shouldDecodeNewlines),
      }
    }

[please note: this is UNTESTED (testing proceeding as we speak)]

[posva]

yeah, same reasons apply even though events are not mentioned 🙂