Proposed shorthand for v-model

[warrensearle]

Summary

A shorthand for v-model with and without arguments

Basic example

:: is shorthand for v-model
::attribute is shorthand for v-model:attribute

Motivation

Vue provides special shorthands for two of the most often used directives, v-bind and v-on. Template shorthands

v-model is also an often used directive and in Vue 3 it's usage will increase now that we have arguments and a replacement for two-way binding using .sync. Migration guide. v-model

From a new and regular user point of view : and @ are really nice shorthands for one-way binding and events. Using :: for two-way binding seems an intuitive partner to :.

Detailed design

v-model Shorthand

<!-- full syntax -->
<ChildComponent v-model="pageTitle" />

<!-- shorthand -->
<ChildComponent ::="pageTitle" />

v-model with argument Shorthand

<!-- full syntax -->
<ChildComponent v-model:title="pageTitle" />

<!-- shorthand -->
<ChildComponent ::title="pageTitle" />

Unresolved questions / considerations

• would this have a high implementation cost?
• would the use of :: be too easily confused with :?

[Demivan]

Nice idea, but I would assume that <ChildComponent ::="pageTitle" /> syntax would be disabled.
Just like you cannot write <todo-list #="{ item }"> with slot shorthand.

[stafyniaksacha]

I like the idea too, but I rather prefer a single character instead
(why not a * star <ChildComponent *="refValue" *title="refTitle" />)

[darrylnoakes]

Any news on this?

[sxzz]

I implemented this feature - @vue-macros/short-vmodel. Read the docs.

[darrylnoakes]

My vote is for $.

And I wish GitHub had some sort of "polls" feature...

[warrensearle]

I like $ too. It reminds me of naming variables (e.g. in PHP) and that's kinda what we are setting up here.

So we would have <ChildComponent $="pageTitle" /> and <ChildComponent $title="pageTitle" />

@sxzz would using $ work better in terms of the linting issues you experienced with :: being replaced as :?

[sxzz]

Yes, at the moment there's better experience using $ rather than ::. Cause 3rd party libraries like ESLint, Prettier haven't support it yet.

If Vue official accepted it and merged the RFC, it won't be a problem.

[sxzz]

Shorthand is customizable now. There are there prefixes provided: ::, $, *.

Example: <input $="foo" />

[yeli19950109]

#455 (comment)

import { defineConfig } from 'vite'
import vue2 from '@vitejs/plugin-vue2'
import * as compiler from 'vue/compiler-sfc'
import * as cheerio from 'cheerio'
import * as htmlparser2 from 'htmlparser2'
const compileTemplate = compiler.compileTemplate;
import type { Element } from "cheerio"
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue2({
      compiler: {
        ...compiler,
        compileTemplate: (options) => {
          // @ts-ignore
          const $ = cheerio.load(htmlparser2.parseDocument(options.source, { lowerCaseAttributeNames: false }), { _useHtmlParser2: true })
          const doms = $("*");
          for (let i = 0; i < doms.length; i++) {
            const ele = doms[i] as Element;
            const attrs = ele.attributes.filter(it => it.name.startsWith("$"));
            if (attrs.length) {
              attrs.forEach(it => {
                const el = $(ele).removeAttr(it.name)
                if (it.name == '$') {
                  el.attr("v-model", it.value)
                } else {
                  el.attr(`:${it.name.substring(1, it.name.length)}.sync`, it.value)
                }
              })
            }
          }
          options.source = $.html();
          return compileTemplate(options)
        }
      }
    })
  ],
})

vue2中并没有nodeTransforms,所以我直接自定义了一个compileTemplate,利用cheerio直接替换$为v-model,$xxx为xxx.sync,然后继续调用vue/compiler-sfc自带的compileTemplate

[jairo-ab]

Do we have any news for native implementation?

[angelhdzmultimedia]

Is this deprecated?

It's not working for me with either syntax ($ or :: )

Edit: Ooooh, it's because I'm using Full SFC with JSX. That must be it.

Edit 2 Works beautifully so far in .vue files in Nuxt 3!

[wenfangdu]

@warrensearle How about using :@? :@prop = :prop + @update:prop, pretty intuitive.

[warrensearle]

Thanks @wenfangdu another good suggestion.

👍 It's using characters we are already familiar with : and @
👍 It does seem intuitive: something like a 'bind event/update' 😵
👎 Which way round should they go & should there be any difference between :@ and @:?

[wenfangdu]

@warrensearle @: should not work, since two options can lead to debates and code inconsistencies.

[theking2]

#

# It sits next to @ on most keyhoards. The $ has too many meanings in JavaScript and other languages so is only confusing. :: is confusing as one has to distinguish between bind and model. Clearly fine for the experienced dev but not for the junior. * is a wildcard. ? would be an option we are obtaining something from the view and the model.
But the hastag hints at an identifier. This time for a model parameter, so the semantics are right.

[petitkriket]

i would avoid any already used caracter to avoid confusion of responsability with other features

• # is already used for slot usage shorthand
• : for props
• @ for events
• $ is/was for global variables and comes with history

on the other hand

• ? does not convey the meaning of two way binding nature of v-model
• > is going one way but different that :

i am not sure if a v-model shorthand is actually helpful here, not even taking into account nested v-models case

v-model:streetName="form.streetName" to >streetName="form.streetName"

[ShGKme]

> is not valid for HTML attribute name

See: https://html.spec.whatwg.org/#attributes-2

[theking2]

ofcourse it is not but isn't : or @ not valid either?

[theking2]

i would avoid any already used caracter to avoid confusion of responsability with other features

* `#` is already used for slot usage shorthand

* `:`  for props

* `@` for events

* `$` is/was for global variables and comes with history

on the other hand

* `?` does not convey the meaning of two way binding nature of v-model

* `>` is going one way but different that `:`

i am not sure if a v-model shorthand is actually helpful here, not even taking into account nested v-models case

v-model:streetName="form.streetName" to >streetName="form.streetName"

I wasn't aware of # being used for that already. Thanks! (but is it still used that way🤔)

[theking2]

So we are running out of viable ascii characters... % + § / _ ? I suggest we take a vote on what makes sense and is allowed

[ShGKme]

ofcourse it is not but isn't : or @ not valid either?

They are valid. See the link to the specification above.