javascript - v-on :click inside a Vue Component does not work

Question

我的应用程序中有一个简单的 Vue 侧边栏实例，其中列出了侧边栏的所有菜单。我有一个像这样的模板的本地组件。

template:'<div><li class="custom-erp-menu-list" v-on:click="toggleOpenChild">'+
    '<a href="#">'+
        '<span>'+
            '<img src="assets/images/dollar-bills.svg" class="custom-erp-module-list-icon custom-erp-user-icons" width="18" height="18" alt="">'+
        '</span>'+
        '<span class="custom-erp-menu-parent">Purchase Order</span>'+
    '</a>'+
    '<ul class="nav custom-erp-menu-child-dropdown" id="purchase-order-child">'+
        '<li><a href="page-profile.html" class="custom-erp-menu-child">Profile</a></li>'+
        '<li><a href="page-login.html" class="custom-erp-menu-child">Login</a></li>'+
        '<li><a href="page-lockscreen.html" class="custom-erp-menu-child">Lockscreen</a></li>'+
    '</ul>'+
'</li></div>'

有一些奇怪的错误，上面写着

property or method "toggleOpenChild" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property

您可以查看DEMO在这里。

Answer 1

您的 toggleOpenChild 应放置在组件的方法中，如下所示:

components: {
  "side-bar-modules": {
    template:
      '<div><li class="custom-erp-menu-list" v-on:click="toggleOpenChild">' +
      '<a href="#">' +
      "<span>" +
      '<img src="assets/images/dollar-bills.svg" class="custom-erp-module-list-icon custom-erp-user-icons" width="18" height="18" alt="">' +
      "</span>" +
      '<span class="custom-erp-menu-parent">Purchase Order</span>' +
      "</a>" +
      '<ul class="nav custom-erp-menu-child-dropdown" id="purchase-order-child">' +
      '<li><a href="page-profile.html" class="custom-erp-menu-child">Profile</a></li>' +
      '<li><a href="page-login.html" class="custom-erp-menu-child">Login</a></li>' +
      '<li><a href="page-lockscreen.html" class="custom-erp-menu-child">Lockscreen</a></li>' +
      "</ul>" +
      "</li></div>",
    data: function() {
      return {
        user: []
      };
    },
    methods: {
      //function to close/open the child elements
      //when the parent menu is clicked.
      toggleOpenChild: function(event) {
        var currentParent = $(event.currentTarget)
          .find(".custom-erp-menu-parent")
          .text();
        var childListID = currentParent.toLowerCase().replace(/ /g, "-");
        $(".custom-erp-menu-list > ul")
          .not($("#" + childListID + "-child"))
          .slideUp()
          .removeClass("custom-erp-menu-child-open");
        if ($("#" + childListID + "-child").is(":hidden")) {
          $("#" + childListID + "-child")
            .slideDown(300)
            .toggleClass("custom-erp-menu-child-open");
        } else {
          $("#" + childListID + "-child")
            .slideUp(300)
            .toggleClass("custom-erp-menu-child-open");
        }
      }
    }
  }
}

这是更新的 fiddle :

https://jsfiddle.net/cgxnLajf/1/