{"action":"closed","issue":{"url":"https://api.github.com/repos/vuejs/vue/issues/7654","repository_url":"https://api.github.com/repos/vuejs/vue","labels_url":"https://api.github.com/repos/vuejs/vue/issues/7654/labels{/name}","comments_url":"https://api.github.com/repos/vuejs/vue/issues/7654/comments","events_url":"https://api.github.com/repos/vuejs/vue/issues/7654/events","html_url":"https://github.com/vuejs/vue/issues/7654","id":297522448,"number":7654,"title":"[QUESTION ] Does exist clean solution for passing string literal attribute into my custom directive without having error?","user":{"login":"VonSandberg","id":10068143,"avatar_url":"https://avatars2.githubusercontent.com/u/10068143?v=4","gravatar_id":"","url":"https://api.github.com/users/VonSandberg","html_url":"https://github.com/VonSandberg","followers_url":"https://api.github.com/users/VonSandberg/followers","following_url":"https://api.github.com/users/VonSandberg/following{/other_user}","gists_url":"https://api.github.com/users/VonSandberg/gists{/gist_id}","starred_url":"https://api.github.com/users/VonSandberg/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/VonSandberg/subscriptions","organizations_url":"https://api.github.com/users/VonSandberg/orgs","repos_url":"https://api.github.com/users/VonSandberg/repos","events_url":"https://api.github.com/users/VonSandberg/events{/privacy}","received_events_url":"https://api.github.com/users/VonSandberg/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":4,"created_at":"2018-02-15T17:02:22Z","updated_at":"2018-02-15T21:47:08Z","closed_at":"2018-02-15T21:47:08Z","author_association":"NONE","body":"### What problem does this feature solve?\r\nHey guys,\r\nI'm just trying to write very simple custom directive, but I've got a problem with console error,\r\nwhich told me this:\r\n\r\n*[Vue warn]: Property or method \"testModal\" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option or for class-based components, by initializing the property. See https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.*\r\n\r\nWhat I'm trying to solve is to make a directive as a trigger for the modal component (action mutating vuex store state). This simple directive has only `bind` and `unbind` hooks and looks like this example.\r\n\r\nHTML\r\n```html\r\n<button v-show-modal=\"testModal\">Click here</button>\r\n```\r\nJS\r\n```javascript\r\n{\r\n  bind (el, binding) {\r\n    el.event = event => {\r\n      Store.dispatch(MODAL_ACTIONS.SHOW_MODAL, binding.expression)\r\n    }\r\n    el.addEventListener('click', el.event)\r\n  },\r\n  unbind (el) {\r\n    el.removeEventListener('click', el.event)\r\n  }\r\n}\r\n```\r\n\r\nProblem disappears when I use single quotes inside double quotes \r\n`v-show-modal=\"'testModal'\"`\r\n\r\n### What does the proposed API look like?\r\nMore convenient would be adding param to directive object itself (I found this online, but it doesn't work for me, probably it's from older version of Vue)\r\n```javascript\r\n{\r\n  isLiteral: true,\r\n  bind: //....\r\n}\r\n```\r\n\r\nor something like this (same case, found it, but seems to not working anymore)\r\n```html\r\n<button v-show-modal.literal=\"testModal\">Click here</button>\r\n```\r\n\r\nAnyway, I jumped into docs and guide and didn't find any suggestion about this, so maybe there is a solution, but I just didn't come across it. Thanks in advance for any help :)\r\n\r\n<!-- generated by vue-issues. DO NOT REMOVE -->"}}
{"actor":{"display_login":"posva"}}