Gissues: The object syntax for events doesn't work in the render function(`h()`)

waantony

Sep 25th 2020

Version

3.0.0

Reproduction link

https://codepen.io/waantony/pen/BaKMbxr

Steps to reproduce

Click the button and nothing happened.

<!DOCTYPE html>
<html>
<head>
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@3.0.0/dist/vue.global.js"></script>
</head>
<body>
  <div id="app"></div>

  <script>
    const { h, createApp } = Vue
    createApp({
      render () {
        return h('button', {
          // This is OK!
          // onClick: () => {
          //   console.log('onClick', 'OK')
          // },

          // This doesn't work!
          onClick: {
            handler () {
              console.log('onClick', 'OK')
            },
          },
        }, 'click')
      },
    }).mount('#app')
  </script>
</body>
</html>

What is expected?

The object syntax for events works in the render function.

What is actually happening?

It doesn't work.

posva

Sep 25th 2020

There is no such syntax, you have to use the function one. Why were you expecting this syntax to work?

waantony

Sep 27th 2020

There is no such syntax, you have to use the function one. Why were you expecting this syntax to work?

I found it in official Chinese doc. https://v3.cn.vuejs.org/guide/render-function.html#v-on.

I realized that it was changed in the English Doc.

waantony

Sep 27th 2020

There is no such syntax, you have to use the function one. Why were you expecting this syntax to work?

The object syntax for events was supported in vue@2.x, why it was removed in vue@3.x ? Just wanna know the reason...