我有一个清单
<li v-for="menu_item, key in menu" @click="clickMenu(key)" :ref="'menu'+key">
{{menu_item.name}}
</li>
在我的 vue 中，我有
mounted(){
// This shows the $refs as being mounted and available
console.log(this.$refs)
console.log(this.$refs.menu1)
// Click menu item 2 seconds after mounting
this.$refs.menu1.click()
// click is UNDEFINED
},
methods: {
clickMenu:function(key){
console.log("CLICKED "+key)
},
}
我收到“无法读取未定义的属性‘点击’”
我如何简单地以编程方式触发元素上的点击？
Github 上的另一个答案说我应该做...
this.$refs.menu1.$el.click()
但这也没有定义？？
继承人一个 JSFiddle 希望有人能在这里弄清楚JSFIDDLE ！
您的代码可能存在一些小问题。使用时的this内部上下文不是您所期望的。要保留能够访问和类似组件属性/功能的上下文，请改用箭头函数。setTimeout()function() {}this$refs() => {}
下一个问题是访问 ref 的底层元素，例如menu1. 我在下面提供了一个示例，但日志记录this.$refs.menu1返回一个元素数组[<li>]。你需要做一些类似的事情this.$refs.menu1[0]来访问底层元素（虽然有一种更“Vue”的方式来做到这一点）：
{
// ...
methods: {
handleClick(key) {
console.log(key);
}
},
mounted() {
console.log(this.$refs);
console.log(this.$refs.menu1[0]);
console.log(this);
setTimeout(() => {
console.log(this);
this.$refs.menu1[0].click();
}, 2000);
}
}
这是一个实际的例子。
希望这有帮助！
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句