Javascript 在Vue.js中单击DOM元素时执行函数

我希望在使用特定类单击dom中的元素时执行一个函数。它只是不起作用，但我也收到任何错误。这是我的

代码段：

        methods: {
            initTab: function(){
                document.querySelectorAll('.element').onclick = this.nextTab()
            }
        },            
        mounted: function () {
            this.initTab()
        }

我 我希望每次单击元素时都执行该函数。如果有人能帮助我，我将不胜感激：）

在Vue应用程序中几乎不需要（如果有的话）document.queryselectoral（）

在这种情况下，您可以利用授权：

方法：{
onClick（e）{
if（e.target.classList.contains（'element'））{
//处理点击
}
}
}
在Vue应用程序中几乎不需要（如果需要的话）document.querySelectorAll（）

在这种情况下，您可以利用授权：



方法：{
onClick（e）{
if（e.target.classList.contains（'element'））{
//处理点击
}
}
}
您试图在vue中使用通用javascript逻辑。这通常不是一个好主意

在这种情况下，我会这样做：

<component-name @click="nextTab(tabName)"></component-name>

<ul v-for="tab in tabs">
  <li @click="nextTab(tab)">{{tab}}</li>
</ul>

而且你根本不需要骑马

结论：尝试通过创建重复的组件或元素（如li）来避免重复，而不是尝试向类添加事件侦听器。
您尝试在vue中使用常规javascript逻辑。这通常不是一个好主意

在这种情况下，我会这样做：

<component-name @click="nextTab(tabName)"></component-name>

<ul v-for="tab in tabs">
  <li @click="nextTab(tab)">{{tab}}</li>
</ul>

而且你根本不需要骑马

结论：尝试通过创建重复的组件或元素（如li）来避免重复，而不是尝试将事件侦听器添加到类。
将
@click=“initTab（$event）”
添加到文档或模板根目录，这样可以跟踪模板上的每个
单击事件，这样，您可以将逻辑放在只有
.element
类名的元素上。如果您在组件中使用它，您可以这样做：


var-app=新的Vue({
el:“#应用程序”，
数据（）{
返回{
}
},
方法：{
nextTab（）{
log（“您单击了类名为element的元素”）
},
initTab（事件）{
让targetClassNames=event.target.className.split（“”）；
targetClassNames.filter（e=>{
如果（e==“元素”）{
this.nextTab（）；
}
});
}
},
安装的（）{
}
})
#应用程序{
高度：100px；
显示：网格
}

1.
2.
3.
4.
5.
将
@click=“initTab（$event）”
添加到文档或模板根目录中，这允许您跟踪模板上的每个
单击事件，这样您就可以将逻辑添加到只有
.element
类名的元素中。如果您在组件中使用它，您可以这样做：


var-app=新的Vue({
el:“#应用程序”，
数据（）{
返回{
}
},
方法：{
nextTab（）{
log（“您单击了类名为element的元素”）
},
initTab（事件）{
让targetClassNames=event.target.className.split（“”）；
targetClassNames.filter（e=>{
如果（e==“元素”）{
this.nextTab（）；
}
});
}
},
安装的（）{
}
})
#应用程序{
高度：100px；
显示：网格
}

1.
2.
3.
4.
5.
非常感谢您的回答。我想自动化每个类，因为我的页面上有很多这样的元素，不会每次手动添加@click事件。现在你必须多次添加该类。这真的少了工作吗？非常感谢你的回答。我想自动化每个类，因为我的页面上有很多这样的元素，不会每次手动添加@click事件。现在你必须多次添加该类。这真的是更少的工作吗？您使用的是单文件组件吗？我有一个解决方案可以满足您的特定需求，我想知道您是如何实现vueHello的，我只是将vue用作一个没有组件的脚本。我只有几个实例：）但我正在考虑切换到单文件组件您是否正在使用单文件组件？我有一个解决方案可以满足您的特定需求，我想知道您是如何实现vueHello的，我只是将vue用作一个没有组件的脚本。我只有几个实例：），但我正在考虑切换到单文件组件