javascript - 在 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