VUE v-for中 动态绑定事件方法

今天做了一个菜单权限的功能，需要根据后台返回的菜单内容在前台用VUE展示，并且点击不同菜单按钮可以进入到不同的页面，所以这里要动态绑定不同的事件方法

 

一开始尝试过在v-on:click里直接写方法名的形式，发现不起作用（错误示范）

     <van-grid
        :column-num="3">
        <van-grid-item
          v-for="item in menuList"
          :key="item.menuid"
          :icon="item.menuimg"
          :text="item.menuname"
          v-on:click="item.methodName"
        >
        </van-grid-item>
      </van-grid>

 

---

于是想到以下写法

VUE部分：这里使用v-on:click的方式来动态绑定事件

     <van-grid
        :column-num="3">
        <van-grid-item
          v-for="item in menuList"
          :key="item.menuid"
          :icon="item.menuimg"
          :text="item.menuname"
          v-on:click="turnPage(item.methodName)"
        >
        </van-grid-item>
      </van-grid>

 

script部分：在方法里根据用this[方法名]()的方式 动态传参去调不同的方法 从而实现动态绑定事件不同的方法

methods: {
    turnPage(methodName) {
      console.log(methodName);
      this[methodName]();
    },
    dataInspectHomepage() {
      dataInspectHomepage(this);
    },
    pointCheckHomepage() {
      pointCheckHomepage(this);
    },
    repairOrderHomePage() {
      repairOrderHomePage(this);
    },
  },