{"action":"opened","issue":{"url":"https://api.github.com/repos/vuejs/babel-plugin-transform-vue-jsx/issues/143","repository_url":"https://api.github.com/repos/vuejs/babel-plugin-transform-vue-jsx","labels_url":"https://api.github.com/repos/vuejs/babel-plugin-transform-vue-jsx/issues/143/labels{/name}","comments_url":"https://api.github.com/repos/vuejs/babel-plugin-transform-vue-jsx/issues/143/comments","events_url":"https://api.github.com/repos/vuejs/babel-plugin-transform-vue-jsx/issues/143/events","html_url":"https://github.com/vuejs/babel-plugin-transform-vue-jsx/issues/143","id":341143014,"node_id":"MDU6SXNzdWUzNDExNDMwMTQ=","number":143,"title":"Object spread operator isn't applied correctly","user":{"login":"petervmeijgaard","id":5537701,"node_id":"MDQ6VXNlcjU1Mzc3MDE=","avatar_url":"https://avatars3.githubusercontent.com/u/5537701?v=4","gravatar_id":"","url":"https://api.github.com/users/petervmeijgaard","html_url":"https://github.com/petervmeijgaard","followers_url":"https://api.github.com/users/petervmeijgaard/followers","following_url":"https://api.github.com/users/petervmeijgaard/following{/other_user}","gists_url":"https://api.github.com/users/petervmeijgaard/gists{/gist_id}","starred_url":"https://api.github.com/users/petervmeijgaard/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/petervmeijgaard/subscriptions","organizations_url":"https://api.github.com/users/petervmeijgaard/orgs","repos_url":"https://api.github.com/users/petervmeijgaard/repos","events_url":"https://api.github.com/users/petervmeijgaard/events{/privacy}","received_events_url":"https://api.github.com/users/petervmeijgaard/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-07-13T20:02:23Z","updated_at":"2018-07-13T20:02:23Z","closed_at":null,"author_association":"NONE","body":"Goodday!\r\n\r\nI ran into an issue when I was applying the spread operator on a custom component with JSX syntax.\r\nThe properties that I want to apply, aren't applied correctly.\r\n\r\nExample:\r\n```JSX\r\n// UIButton.js\r\n\r\n/* @vue/component */\r\nexport default {\r\n  name: 'UIButton',\r\n\r\n  props: {\r\n    isExternal: {\r\n      type: Boolean,\r\n      required: false,\r\n      default: () => false,\r\n    },\r\n  },\r\n\r\n  computed: {\r\n    classes() {\r\n      return [ 'computed', 'classes' ];\r\n    },\r\n\r\n    children() {\r\n      return this.hasSlot() ? [...this.$slots.default] : [this.content];\r\n    },\r\n  },\r\n\r\n  methods: {\r\n    hasSlot(slotName = 'default') {\r\n      return !!this.$slots[slotName];\r\n    },\r\n  },\r\n\r\n  /* eslint-disable-next-line no-unused-vars */\r\n  render(h) {\r\n    let props = {\r\n      class: this.classes,\r\n    };\r\n\r\n    if (this.isExternal) {\r\n      props.target = '_blank';\r\n      props.rel = 'noopener noreferrer';\r\n    }\r\n\r\n    /*\r\n     * Will return in this:\r\n     * {\r\n     *    class: ['computed', 'classes'],\r\n     *    rel: 'noopener noreferrer',\r\n     *    target: '_blank'\r\n     * }\r\n     */\r\n    console.log(props);\r\n\r\n    return (\r\n      <a {...props}>\r\n        {this.children}\r\n      </a>\r\n    );\r\n  },\r\n};\r\n```\r\n\r\nWhen using this example, you'll see that the classes are applied correctly, but the `rel` and `target` are not.\r\n\r\n---\r\nAs you can see, the `console.log` is showing the object with all the properties.\r\n![screenshot_20180713_215547](https://user-images.githubusercontent.com/5537701/42711432-1dd2f4a8-86e8-11e8-90d5-676b630ab8f3.png)\r\n\r\nBut the `rel` and `target` aren't rendered.\r\n![screenshot_20180713_215958](https://user-images.githubusercontent.com/5537701/42711434-1fb6eaa4-86e8-11e8-8b21-80481324c771.png)\r\n"}}
{"actor":{"display_login":"petervmeijgaard"}}