vue遍历li添加@click事件，有时点击第一次不触发事件，第二次才触发

最新推荐文章于 2024-08-21 08:58:39 发布

meng2lin

最新推荐文章于 2024-08-21 08:58:39 发布

阅读量5.1k

点赞数 2

本文链接：https://blog.csdn.net/meng2lin/article/details/117525974

版权

在项目开发中遇到Vue遍历li元素添加@click事件，首次点击不响应，二次点击才触发。原因可能涉及better-scroll库阻止touch事件。通过在页面引入better-scroll并在mounted阶段尝试设置，起初出现找不到元素的错误。最终解决方案是将ref属性放置在最外层div，并相应调整mounted中的代码，成功解决该问题。

摘要由CSDN通过智能技术生成

最近在开发项目中，遇到了vue遍历li添加@click事件，有时点击第一次不触发事件，第二次才触发，这个bug出现的莫名其妙，没有任何头脑
以下是我写的代码：

<ul>
	<li v-for="item in list" v-key="item.id" @click(item.id)>{
  {item.name}}</li>
</ul>

这样写没有一点毛病，于是给元素设置了层级关系，不起任何作用，于是翻阅资料，说项目中引入了‘better-scroll’，默认它会阻止touch事件。我在项目中确实用到了‘better-scroll’，但是这个页面没有用啊。于是抱着试试的态度开始了。
在页面中引入‘better-scroll’

import Bscroll from 'better-scroll'

在mounted中：

mounted () {
	// better-scroll的原因，默认它会阻止touch事件。所以在配置中需要加上click: true
    this.scroll = new Bscroll(this.$refs.from, { click: true, tap: true })
  },
  <van-form validate-first ref="form"></van-form>

这样写了之后页面开始报错，说是没有找到这个元素，‘from’改成驼峰式命名也不行