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>'

有一些奇怪的错误提示

属性或方法“ toggleOpenChild”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保该属性在data选项中或对于基于类的组件都是反应性的

您可以在此处签出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");
        }
      }
    }
  }
}

这是更新的小提琴：

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

Answer 2

toggleOpenChild位于父包装中，但您在不存在的子组件中进行调用。

根据您的结构-您可以将该方法移至子组件中，也可以进行调整并使用vue事件。

    {
      template:
        '<div><li class="custom-erp-menu-list" v-on:click="toggleOpenChild">' +
        '<a href="#">' +
        "<span>" +
        '<img src="" 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 : {

        // method has to be part of the component
        toggleOpenChild : function()
        {
          console.log('open child');
        }
      }
}

从您的演示中采用：https://codepen.io/anon/pen/ePrOqm

v-on：在Vue组件内单击不起作用

2 个答案: