提问人：Viktor Bylbas 提问时间：8/16/2023 最后编辑：Viktor Bylbas 更新时间：8/17/2023 访问量：54
在 vue 中点击时上下文如何绑定？
How context bind on click in vue?
问：
在 vue 中点击时上下文如何绑定？
具有点击功能的 Html：
<li v-on:click="itemClick($event, this)"></li>
我的vue js代码：
var app = new Vue({
el: '#mainApp',
methods: {
itemClick: (event, context) => {
context.someFunction(); // undefined
this.someFunction(); // undefined
},
someFunction: function() {
// ...
}
}
}
有什么想法吗？
答：
1赞
rozsazoltan
8/16/2023
#1
- 事件处理 - Vue Docs
默认情况下，左键触发事件，右键触发事件，因此与原生 JavaScript 类似，只需声明事件发生时要执行的函数即可。@click@contextmenu
methods（）- Vue 文档
在本节中，您将在对象中声明函数，因此您只需要在函数之间使用逗号而不是分号。此外，请遵循我为函数演示的模式，但您也可以参考随附文档中的示例。methods
您显示的示例代码遵循基于其外观的选项 API 的结构。因此，我将相应地在响应中提供示例代码。
选项 API 示例
<template>
<div>
<li @click="(event) => itemClick(event)">Test</li>
</div>
</template>
<script>
export default {
methods: {
itemClick(event) {
// context.someFunction(); // this doesn't make sense
this.someFunction(); // call methods.someFunction()
}, // <--- need use , instead of ; because methods is object, where itemClick() and someFunction() functions will elements of object
someFunction() {
// ...
}
}
}
</script>
评论
1赞
Viktor Bylbas
8/17/2023
我将我的函数更改为itemClick： function （event） { }，然后我得到了上下文。我发现我的函数 this.someFunction（）。谢谢
评论
options apicomposition api