[Feature request] Add a reference to the v-model in the directive hook signature

Currently with Vue 2, when you use a directive on an element, you only have 2 options that I know of that allows you to update the v-model foo from within the directive bind functions (and other hooks).

The first option is to modify your Html template and pass the v-model name as a parameter, like :

<input type="text" v-my-directive="'foo'" v-model.number="foo">

//Then use that inside the directive hooks with :
vnode.context[bindings.value] = 42;

The problem with this approach is that first it’s not DRY, the v-model name is right there, why repeat it? It’s also error-prone, too verbose and more importantly, poses difficulties when used in a v-for loop.

The second option, far better in my opinion, is to keep the Html simple and semantic :

<input type="text" v-my-directive v-model.number="foo">

All you have to do then is accessing the v-model name via the vnode.data.directives variable which lists all the directives attached to the element, v-model being one of them. From there you have to iterate on that array until you find the model named directive. Lastly, you can access the v-model name in its expression attribute.

I created some helpers function to do just that ;

export function findVModelName(vnode) {
    return vnode.data.directives.find(function(o) { //Search the v-model name attached to the element
        return o.name === 'model';
    }).expression;
}

export function setVModelValue(value, vnode) {
    vnode.context[findVModelName(vnode)] = value;
}

This works well also in v-for loops, or when you do not know the v-model name beforehand.

My feature request would simply by to modify all the directive hook function signatures to add a reference to the v-model object. The new signature would be like :

bind(el, bindings, vnode, oldVnode, vModel) {}

//you would then be able to modify the v-model attached to the element the directive is declared on just by using :
vModel = 42; //Doing that would automatically update the v-model accordingly

I think that would help a lot, what do you think?

You can see an example where I needed to access the v-model in the following forum thread

[LinusBorg]

This could be achieved in 1.0 directives with this.set(), but the decision to remove it was intentional.

In 2.0, directives are meant to be used for low-level DOM access only. Things like meddling with v-model functionality should explicitly not be their job anymore.

In most cases where you want to do that with a directive, You should rather use a component instead.

If you have a specific situation that you need help with, we’re happy to help you out on forum.vuejs.org

[LinusBorg]

Also about the v-model reference in the directive hook signatures, I imagine you could just set vModel to null by default when there are no v-model attached to an element on which the directive is declared though.

I was thinking about redusability, and compatibility.

You would often be in a situation where you start with using v-model, and later (have to) refactor to use an @event instead -. At which point all those directives relying on the v-model expression would stop working