{"action":"created","issue":{"url":"https://api.github.com/repos/vuejs/jsx/issues/20","repository_url":"https://api.github.com/repos/vuejs/jsx","labels_url":"https://api.github.com/repos/vuejs/jsx/issues/20/labels{/name}","comments_url":"https://api.github.com/repos/vuejs/jsx/issues/20/comments","events_url":"https://api.github.com/repos/vuejs/jsx/issues/20/events","html_url":"https://github.com/vuejs/jsx/issues/20","id":385211673,"node_id":"MDU6SXNzdWUzODUyMTE2NzM=","number":20,"title":"Directives don't work when v-model is used","user":{"login":"DM2489","id":40390596,"node_id":"MDQ6VXNlcjQwMzkwNTk2","avatar_url":"https://avatars0.githubusercontent.com/u/40390596?v=4","gravatar_id":"","url":"https://api.github.com/users/DM2489","html_url":"https://github.com/DM2489","followers_url":"https://api.github.com/users/DM2489/followers","following_url":"https://api.github.com/users/DM2489/following{/other_user}","gists_url":"https://api.github.com/users/DM2489/gists{/gist_id}","starred_url":"https://api.github.com/users/DM2489/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/DM2489/subscriptions","organizations_url":"https://api.github.com/users/DM2489/orgs","repos_url":"https://api.github.com/users/DM2489/repos","events_url":"https://api.github.com/users/DM2489/events{/privacy}","received_events_url":"https://api.github.com/users/DM2489/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2018-11-28T10:57:15Z","updated_at":"2018-11-28T14:55:54Z","closed_at":null,"author_association":"NONE","body":"Consider the following component:\r\n\r\n```\r\nconst Cwd6 = new Vue({\r\n    el: '#cwd6',\r\n\r\n    data: function () {\r\n        return {\r\n            textExample: ''\r\n        };\r\n    },\r\n\r\n    render(h) {\r\n        console.log(this.textExample);\r\n        return (\r\n            <div>\r\n                <b-col cols=\"12\">\r\n                    <b-form-group\r\n                        id=\"form-group-text\"\r\n                        description=\"Enter some text\"\r\n                        label=\"Text\"\r\n                        label-for=\"text-field\">\r\n                        <input\r\n                            type=\"text\"\r\n                            name=\"textField\"\r\n                            v-model={this.textExample}\r\n                            v-validate=\"required\"\r\n                        />\r\n                        <div>exampletext: {this.textExample}</div>\r\n                        <CwdValidationError\r\n                            errors={this.errors}\r\n                            fieldName=\"textField\" />\r\n                    </b-form-group>\r\n                </b-col>\r\n            </div>\r\n        );\r\n    }\r\n});\r\n```\r\nIn the monorepo plugin, it is transpiled to:\r\n```\r\nvar Cwd6 = new Vue({\r\nel: '#cwd6',\r\ndata: function data() {\r\n    return {\r\n        textExample: ''\r\n    };\r\n},\r\nrender: function render(h) {\r\n    var _this = this;\r\n\r\n    console.log(this.textExample);\r\n    return h(\"div\", [h(\r\n        \"b-col\", {\r\n            \"attrs\": {\r\n                \"cols\": \"12\"\r\n            }\r\n        },\r\n        [h(\r\n            \"b-form-group\", {\r\n                \"attrs\": {\r\n                    \"id\": \"form-group-text\",\r\n                    \"description\": \"Enter some text\",\r\n                    \"label\": \"Text\",\r\n                    \"label-for\": \"text-field\"\r\n                }\r\n            },\r\n            [h(\"input\", (0, _babelHelperVueJsxMergeProps.default)([{\r\n                \"attrs\": {\r\n                    \"type\": \"text\",\r\n                    \"name\": \"textField\"\r\n                },\r\n                \"directives\": [{\r\n                    name: \"validate\",\r\n                    value: \"required\"\r\n                }],\r\n                \"domProps\": {\r\n                    \"value\": _this.textExample\r\n                },\r\n                \"on\": {\r\n                    \"input\": function input($event) {\r\n                        if ($event.target.composing) return;\r\n                        _this.textExample = $event.target.value;\r\n                    }\r\n                }\r\n            }, {\r\n                directives: [{\r\n                    name: \"model\",\r\n                    value: _this.textExample,\r\n                    modifiers: {}\r\n                }]\r\n            }])), h(\"div\", [\"exampletext: \", this.textExample]), h(CwdValidationError, {\r\n                \"attrs\": {\r\n                    \"errors\": this.errors,\r\n                    \"fieldName\": \"textField\"\r\n                }\r\n            })]\r\n        )]\r\n    )]);\r\n}\r\n});\r\n```\r\nUnfortunately, the `v-validate` directive is not working. This appears to be caused by the way that non `v-model` directives are transpiled.\r\n\r\nIn https://github.com/vuejs/babel-helper-vue-jsx-merge-props, this works, and is transpiled as:\r\n```\r\nrender: function render(h) {\r\n    var _this = this;\r\n\r\n    console.log(this.textExample);\r\n    return h('div', [h(\r\n        'b-col', {\r\n            attrs: {\r\n                cols: '12'\r\n            }\r\n        },\r\n        [h(\r\n            'b-form-group', {\r\n                attrs: {\r\n                    id: 'form-group-text',\r\n                    description: 'Enter some text',\r\n                    label: 'Text',\r\n                    'label-for': 'text-field'\r\n                }\r\n            },\r\n            [h('input', (0, _babelHelperVueJsxMergeProps2.default)([{\r\n                attrs: {\r\n                    type: 'text',\r\n                    name: 'textField'\r\n                },\r\n                domProps: {\r\n                    'value': _this.textExample\r\n                },\r\n                on: {\r\n                    'input': function input($event) {\r\n                        if ($event.target.composing) return;\r\n                        _this.textExample = $event.target.value;\r\n                    }\r\n                }\r\n            }, {\r\n                directives: [{\r\n                    name: 'model',\r\n                    value: _this.textExample\r\n                }]\r\n            }, {\r\n                directives: [{\r\n                    name: 'validate',\r\n                    value: 'required'\r\n                }]\r\n            }])), h('div', ['exampletext: ', this.textExample]), h(CwdValidationError, {\r\n                attrs: {\r\n                    errors: this.errors,\r\n                    fieldName: 'textField'\r\n                }\r\n            })]\r\n        )]\r\n    )]);\r\n}\r\n```\r\nI've tested this for other directives and the result is always the same. It seems that directives are being added at the wrong place.\r\n"},"comment":{"url":"https://api.github.com/repos/vuejs/jsx/issues/comments/442475206","html_url":"https://github.com/vuejs/jsx/issues/20#issuecomment-442475206","issue_url":"https://api.github.com/repos/vuejs/jsx/issues/20","id":442475206,"node_id":"MDEyOklzc3VlQ29tbWVudDQ0MjQ3NTIwNg==","user":{"login":"DM2489","id":40390596,"node_id":"MDQ6VXNlcjQwMzkwNTk2","avatar_url":"https://avatars0.githubusercontent.com/u/40390596?v=4","gravatar_id":"","url":"https://api.github.com/users/DM2489","html_url":"https://github.com/DM2489","followers_url":"https://api.github.com/users/DM2489/followers","following_url":"https://api.github.com/users/DM2489/following{/other_user}","gists_url":"https://api.github.com/users/DM2489/gists{/gist_id}","starred_url":"https://api.github.com/users/DM2489/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/DM2489/subscriptions","organizations_url":"https://api.github.com/users/DM2489/orgs","repos_url":"https://api.github.com/users/DM2489/repos","events_url":"https://api.github.com/users/DM2489/events{/privacy}","received_events_url":"https://api.github.com/users/DM2489/received_events","type":"User","site_admin":false},"created_at":"2018-11-28T14:55:54Z","updated_at":"2018-11-28T14:55:54Z","author_association":"NONE","body":"Think I've found it... in  https://github.com/vuejs/babel-helper-vue-jsx-merge-props `model` never actually makes it into the merged properties:\r\n\r\n![image](https://user-images.githubusercontent.com/40390596/49159635-ddc35500-f31c-11e8-884a-d4c8b3854fd7.png)\r\n\r\nWhereas in the monorepo version it does:\r\n\r\n![image](https://user-images.githubusercontent.com/40390596/49159839-4ca0ae00-f31d-11e8-9c81-374ae4938a08.png)\r\n\r\nI'm guessing that as `v-model` in JSX is just sugar, we don't want to be passing  `model` through?"}}
{"actor":{"display_login":"DM2489"}}