How to define Vue Events on Render Method using createElement

问题

I'm using ElementUi NavMenu, and render function with the createElement method to make the items of the menu just using JSON with titles and index of the menu, just HTML and JS files, not .vue files.

The menu is mounted, the submenus are shown when I click it, but the actions of the submenu (el-menu-item) does not work. I even try the attributes click, item-click, v-on: click when creating the-menu-item (the documentation of ElementUi tells that @click must be used, but this causes an error on createElement when the attributes are defined), but no one works, no error occurs, as if the method was not been declared.

Only onclick attribute works on the el-menu-item, but when I use it, the method of vue component is not called, and so I have to make a function outside of component (on a class for example), and when this function is called it performs a call to component method (I try $ emits) and an error occurs, because the method of component is not found.

How can I add @click (or similar) event on the el-menu-item inside render function of the component to call a method of the same component?

Documenation of NavMenu of ElementUI.

How I'm creating menu item:

createElement("el-menu-item",{
    attrs:{
        index:json[i].id,
        click:json[i].onclick
    }},
    json[i].title
)

回答1:

Actually, this is mentioned in Vue.js documentation.

See https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth .

e.g. https://codepen.io/jacobgoh101/pen/ypjGqw?editors=0010

Vue.component("test", {
  render: function(createElement) {
    return createElement(
      "button",
      {
        on: {
          click: function() {
            alert('click');
          }
        }
      },
      "Header"
    );
  }
});

来源：https://stackoverflow.com/questions/48219897/how-to-define-vue-events-on-render-method-using-createelement

标签

Vue.js

element-ui