Question

我有一个清单

<li v-for="menu_item, key in menu" @click="clickMenu(key)" :ref="'menu'+key">
  {{menu_item.name}}
</li>

我的想法是

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)
   },
}

我收到“无法读取未定义的属性'click'”

如何简单地以编程方式触发元素点击？

关于Github的另一个答案说我应该做...

 this.$refs.menu1.$el.click()

但是那也没有定义？

这里有一个JSFiddle 希望有人能弄清楚 JSFIDDLE HERE!!

Answer 1

您的代码可能存在一些小问题。使用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);
  }
}

这里是example的动作。

希望有帮助！

Answer 2

如果您的目标是单击菜单的第一项，则只需调用clickMenu方法并发送索引，在这种情况下，它将是clickMenu（0）。

如何在Vue.js中触发点击引用

2 个答案: