时间戳

首页 > 解决方案 > 如何在 Vue.js 中触发点击 ref

javascript - 如何在 Vue.js 中触发点击 ref

问题描述

我有一个清单

<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！

标签： javascriptvue.js

解决方案

您的代码可能存在一些小问题。使用时thisinside的上下文不是您所期望的。要保留能够访问和类似组件属性/功能的上下文，请改用箭头函数。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);
  }
}

这是一个实际的例子。

希望这会有所帮助！

推荐阅读