[Feature Request]: Custom model

[sense-it-gmbh]

What problem does this feature solve?

By default v-model binds to value and @input / @change.

In addition it would be nice to be able to replicate this shortcut to other properties/events.

Use-Case:

A pasword-input component with the ability to toggle the visibility.

• The password-value is synced through the v-model.
• Visibility is represented by a internal state-flag.
• The internal state-flag is controlled by a toggle-button/checkbox within the component
• Other (parent) components may need to manipulate this value during form-reset in order to put the component in its original state.

Currently one would have to listen to the event, indicating a visibility-change and set a property controlling the visibility.

<my-component
  v-model="password"
  :visible="settings.visible"
  @visible="val => settings.visible = val"
></my-component>

What does the proposed API look like?

Through an directive-argument the event to listen to/ the property to set is defined.
For example v-model:visible would listen to the input:visible event and set the visible property.
A model without any argument defaults to current behavior (@input / value).

Component

<template>
  <input :type="(internal.visible ? 'text' : 'password')" @input="$emit('input', $event.target.value)">
  <checkbox v-model="internal.visible" @change="$emit('input:visible', $event.target.value)">
</template>

Usage

<my-component
  v-model="password"
  v-model:visible="settings.visible"
></my-component>

[posva]

Please see vuejs/rfcs#31
Note you can already customize the event and prop by using the model option of a component