在Vue Mounted函数中访问DOM

Question

如何从VueJS实例中的已挂载函数中访问元素。

当我尝试以下操作时，它告诉我该元素未定义。当我看到DOM它就在那里。这可能是在我尝试引用它之前没有呈现元素的情况吗？

document.getElementsByName('transferDate_submit')[0].addEventListener("change",function(){});

Answer 1

当您使用HTMLElement调用Vue.js实例时，会获得$el个实例。查看API。

示例

let allLinks = this.$el.querySelectorAll('a')

或者，您可以使用ref。这就像程序化ID。另请查看API。

示例

<!-- vm.$refs.p will be the DOM node -->
<p ref="p">hello</p>

Answer 2

您可以使用v-on：change或@change来绑定事件侦听器，以便您可以避免操作DOM元素。此外，Vue.js是让你尽可能不使用DOM