vue中v-for循环出来的元素绑定的不同事件

最新推荐文章于 2024-03-18 18:44:23 发布

前端小白的进化之路

最新推荐文章于 2024-03-18 18:44:23 发布

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript vue html

本文链接：https://blog.csdn.net/weixin_41554281/article/details/103594095

JavaScript 同时被 3 个专栏收录

5 篇文章

订阅专栏

vue

3 篇文章

订阅专栏

html

1 篇文章

订阅专栏

本文介绍了一种在Vue中解决循环生成元素时点击事件绑定的问题。通过定义一个handler方法间接调用目标函数，避免了'handler.apply is not a function'错误，实现了全选、反选和重置等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

   <div style="padding: 0 5px;" @click="handler(item.fun)" v-for="(item, index) in iconData" :key="index">
    <i class="iconfont  iconHover" :class="item.icon" :title="item.title"></i>
   </div>

刚开始我在循环出来的元素中加@click="item.fun",出现了handler.apply is not a function的错误。然后网上查了一下，可以通过一个方法间接调用来实现。

      iconData: [
        { icon: 'iconquanxuan', title: '全选', fun: 'checkAll' },
        { icon: 'iconfanxuan', title: '反选', fun: 'toggleAll' },
        { icon: 'iconzhongzhi', title: '重置', fun: 'cancleAll' }
      ]

    handler(fun) {
      this[fun]()
    },
    checkAll() {
      this.checkedList = [...this.Options]
      viewer.bimAdmin.tools['Bim.TilesetModelList'].toggleAllOff()
    },
    cancleAll() {
      this.checkedList = []
      viewer.bimAdmin.tools['Bim.TilesetModelList'].toggleAllOn()
    },
    toggleAll() {
      //反选
      this.checkedList = this.Options.filter(a => this.checkedList.indexOf(a) === -1)
      viewer.bimAdmin.tools['Bim.TilesetModelList'].toggleAll()
    },