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

Question

我有一个 list

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

我收到“无法读取未定义的属性‘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在行动中。

希望对您有所帮助!