[RFC] v-scope as template-local identifier aliasing (sugar for v-for)

[matthew-dean]

Background

One thing that is a common request online is scoping a variable in a template to a particular section of markup. For example, imagine we have an object getter that returns strong TypeScript types when requested by path, like this:

getTyped(model, 'a.deeply.bound.path.name')

Say we're binding values of lots of these paths for a form, and end up with markup like:

    <input v-model="getTyped(model, 'a.deeply.bound.path.name').value" />
    <div v-if="getTyped(model, 'a.deeply.bound.path.name').error">
      {{ getTyped(model, 'a.deeply.bound.path.name').error }}
    </div>

Now, one thing we could do is elevate ALL model references to declared variables in our setup script, but that just moves the verbosity someplace else, and adds a layer of abstraction. A common solution online to get strong TypeScript typing and scoping is to do something like this:

  <template v-for="name in [getTyped(model, 'a.deeply.bound.path.name')]">
    <input v-model="name.value" />
    <div v-if="name.error">
      {{ name.error }}
    </div>
  </template>

In all name references, it will be strongly typed. However, this has some issues:

1. It violates the Law of Least Surprise for other developers on your team. That is, it is "hacking" a for-loop to be used as scope, which is counter-intuitive, as no "looping" is performed.
2. Even though we don't need a key in this instance, as it's a single element and it will only ever be a single element, Vue's documentation advises a key for v-for (although notably acknowledges you may not need one for simple use cases, which this is).
3. Even though this use case is simple, eslint-plugin-vue's default recommended eslint settings, because of #2, will enforce a key in all cases.

Proposal: v-scope="{ key: 'value' }"

Instead, the above could be replaced like this:

  <template v-scope="{ name: getTyped(model, 'a.deeply.bound.path.name') }">
    <input v-model="name.value" />
    <div v-if="name.error">
      {{ name.error }}
    </div>
  </template>

v-scope would allow key / value pairs (defined as an object) that would be referenceable only in this template scope. This would be better than other hacks found on StackOverflow which use an arbitrary key like :set="name = getTyped(model, 'a.deeply.bound.path.name')", which will scope a variable to the entire template (so can be over-written if used more than once), and which will function in a JavaScript environment, but will fail TypeScript type-checking.

[Justineo]

Related: vuejs/core#7218

[pavitra-infocusp]

It's more practical to create a new component in this case.