如何在 Vue.js 中触发点击 ref答案

【问题标题】：How to trigger click on ref in Vue.js如何在 Vue.js 中触发点击 ref
【发布时间】：2019-02-27 19:19:12
【问题描述】：

我有一个清单

<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 HERE!!

【问题讨论】：

是的，我知道我可以使用 javascript 获取元素并这样做。我想通过 Vue $refs 知道它是否可能。因为我看过以前的 SO 问题说上面是你如何做到的......但是......它显然不是
this 在 setTimeout 上下文中的引用是什么？它实际上是否包含对您的 Vue 上下文的引用？
@jdmcnair 忽略这一点，这并不重要，因为它只是用于说明目的。我有实际的触发方法，分开。我已经更新了一个 JSFiddle 来查看。看看我的意思

标签： javascript vue.js

【解决方案1】：

您的代码可能存在一些小问题。使用 function() {} 时，setTimeout() 内的 this 的上下文不是您所期望的。要保留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);
  }
}

这里有一个example 正在使用中。

希望对您有所帮助！

【讨论】：

谢谢！！ settimeout 事情并不重要，因为我只是将它用于示例（并没有注意到自我/这个错误）。在我的真实代码中，我无论如何都使用一种方法来触发点击......但是......使用 [0] 访问元素。那是钱！！ :) 谢谢！
很高兴听到它有帮助。话虽如此，可能还有一种更“Vue”的方法可以做，一些特定的$ 前缀属性，所以请注意以防出现其他答案。
是的。不过我喜欢这种方式，因为我在 Vue 之外使用了 jQuery 滚动/菜单库。所以我需要触发对实际 DOM 元素的点击。显然它是一个 hack，我应该找到一些 Vue meny/scrolly 的替代品，但现在这可行，哈哈

【解决方案2】：

如果您的目标是单击菜单的第一项，只需调用 clickMenu 方法并发送索引，在本例中为 clickMenu(0)。

【讨论】：

我需要以编程方式触发对实际 DOM 元素的点击。因为不幸的是我使用了一个外部 jQuery 库