How to pass arguments to Vue $createElement method

Question

I'm trying to convert JSX code from example at http://element.eleme.io/#/en-US/component/tree#custom-node-content to Vue $createElement code

original code snippet:

renderContent(h, { node, data, store }) {
    return (
      <span>
        <span>
          <span>{node.label}</span>
        </span>
        <span style="float: right; margin-right: 20px">
          <el-button size="mini" on-click={ () => this.append(store, data) }>Append</el-button>
          <el-button size="mini" on-click={ () => this.remove(store, data) }>Delete</el-button>
        </span>
      </span>);
    }
}

and my attempt to transform:

  renderContent (h, { node, data, store }) {
    return h('SPAN', [
      h('SPAN', [h('SPAN', node.label)]),
      h('SPAN', {attrs: {style: 'float: right; margin-right: 20px'}}, [
        h('el-button', { attrs: { size: 'mini', on: { click: this.append(store, data) } } }, 'Append'),
        h('el-button', { attrs: { size: 'mini', on: { click: this.delete } } }, 'Delete')
      ])
    ])
  }

but it fails: the button Append always executed at the time of rendering for every node and never after. While button Delete is never executed at all.

So the question is how to pass an event handler with arguments properly to the created element?

Lukasz Wiktor · Accepted Answer · 2017-08-14 07:32:13Z

3

It's because you're actually calling the append function when rendering the content. Try this:

{ 
    attrs: { size: 'mini' }, 
    on: { click: this.append.bind(this, store, data) } 
}

or use the same solution as in the JSX snippet:

{ 
    attrs: { size: 'mini' },
    on: { click: () => this.append(store, data) } 
}

Both ways provide a function to be called when the click event occurs.

Notice that the on key is sibling to attrs, not inside.

edited Aug 14, 2017 at 7:32

answered Aug 11, 2017 at 12:17

Lukasz Wiktor

20.5k6 gold badges73 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

htonus Over a year ago

first approach gives the error : Error in render function: "TypeError: Cannot read property 'bind' of undefined", the second - no errors, but does nothing

Lukasz Wiktor Over a year ago

That's strange... How it's then possible that this.append(store, data) in your code doesn't throw the error?

htonus Over a year ago

you are right I mistyped function name. So no errors and still event handler is not being triggered. Then I checked documentation again and found out that put on key to a wrong place - inside attrs definition. After fixed - all works fine. Thank you so much!

Lukasz Wiktor Over a year ago

@htonus right, I haven't notice the wrong placement of the on key. It's good that you figured it out. I'm updating my answer to reflect this aspect too.

Collectives™ on Stack Overflow

How to pass arguments to Vue $createElement method

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related