{"action":"created","issue":{"url":"https://api.github.com/repos/vuejs/vue/issues/4065","repository_url":"https://api.github.com/repos/vuejs/vue","labels_url":"https://api.github.com/repos/vuejs/vue/issues/4065/labels{/name}","comments_url":"https://api.github.com/repos/vuejs/vue/issues/4065/comments","events_url":"https://api.github.com/repos/vuejs/vue/issues/4065/events","html_url":"https://github.com/vuejs/vue/issues/4065","id":186165053,"number":4065,"title":"[Feature request] Add a reference to the v-model in the directive hook signature","user":{"login":"AlexandreBonneau","id":7248877,"avatar_url":"https://avatars.githubusercontent.com/u/7248877?v=3","gravatar_id":"","url":"https://api.github.com/users/AlexandreBonneau","html_url":"https://github.com/AlexandreBonneau","followers_url":"https://api.github.com/users/AlexandreBonneau/followers","following_url":"https://api.github.com/users/AlexandreBonneau/following{/other_user}","gists_url":"https://api.github.com/users/AlexandreBonneau/gists{/gist_id}","starred_url":"https://api.github.com/users/AlexandreBonneau/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/AlexandreBonneau/subscriptions","organizations_url":"https://api.github.com/users/AlexandreBonneau/orgs","repos_url":"https://api.github.com/users/AlexandreBonneau/repos","events_url":"https://api.github.com/users/AlexandreBonneau/events{/privacy}","received_events_url":"https://api.github.com/users/AlexandreBonneau/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2016-10-30T21:18:16Z","updated_at":"2016-11-01T09:12:43Z","closed_at":"2016-11-01T09:12:43Z","body":"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).\n\nThe first option is to modify your Html template and pass the v-model name as a parameter, like :\n\n``` html\n<input type=\"text\" v-my-directive=\"'foo'\" v-model.number=\"foo\">\n```\n\n``` javascript\n//Then use that inside the directive hooks with :\nvnode.context[bindings.value] = 42;\n```\n\nThe 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.\n\nThe second option, far better in my opinion, is to keep the Html simple and semantic :\n\n``` html\n<input type=\"text\" v-my-directive v-model.number=\"foo\">\n```\n\nAll 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.\n\nI created some helpers function to do just that ;\n\n``` javascript\nexport function findVModelName(vnode) {\n    return vnode.data.directives.find(function(o) { //Search the v-model name attached to the element\n        return o.name === 'model';\n    }).expression;\n}\n\nexport function setVModelValue(value, vnode) {\n    vnode.context[findVModelName(vnode)] = value;\n}\n```\n\nThis works well also in `v-for` loops, or when you do know the `v-model` name beforehand.\n\nMy 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 :\n\n``` javascript\nbind(el, bindings, vnode, oldVnode, vModel) {}\n\n//you would then be able to modify the v-model attached to the element the directive is declared on just by using :\nvModel = 42; //Doing that would automatically update the v-model accordingly\n```\n\nI think that would help a lot, what do you think?\n\nYou can see an example where I needed to access the v-model in the following [forum thread](http://forum.vuejs.org/t/solved-how-can-you-update-the-v-model-from-a-custom-directive-in-vue-2/2275)\n"},"comment":{"url":"https://api.github.com/repos/vuejs/vue/issues/comments/257520033","html_url":"https://github.com/vuejs/vue/issues/4065#issuecomment-257520033","issue_url":"https://api.github.com/repos/vuejs/vue/issues/4065","id":257520033,"user":{"login":"LinusBorg","id":1444526,"avatar_url":"https://avatars.githubusercontent.com/u/1444526?v=3","gravatar_id":"","url":"https://api.github.com/users/LinusBorg","html_url":"https://github.com/LinusBorg","followers_url":"https://api.github.com/users/LinusBorg/followers","following_url":"https://api.github.com/users/LinusBorg/following{/other_user}","gists_url":"https://api.github.com/users/LinusBorg/gists{/gist_id}","starred_url":"https://api.github.com/users/LinusBorg/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/LinusBorg/subscriptions","organizations_url":"https://api.github.com/users/LinusBorg/orgs","repos_url":"https://api.github.com/users/LinusBorg/repos","events_url":"https://api.github.com/users/LinusBorg/events{/privacy}","received_events_url":"https://api.github.com/users/LinusBorg/received_events","type":"User","site_admin":false},"created_at":"2016-11-01T09:12:43Z","updated_at":"2016-11-01T09:12:43Z","body":"This could be achieved in 1.0 directives with `this.set()`, but the decision to remove it was intentional. \r\n\r\nIn 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. \r\n\r\nIn most cases where yiu want I do that with a directive, You should rather use a component instead. \r\n\r\nIf you have a specific situation that you need help with, we're happy to help you out on forum.vuejs.org"}}
{"actor":{"display_login":"LinusBorg"}}