vue js 安装生命周期钩子内的 getElementById 结果为 null

Question

null当我尝试查看带有 id 的内容时，我一直得到document.getElementById。部分代码如下：

<input-layout v-if="edit" label="Status" class="grayout">
        <u-select v-model='test.status' :options="testStatus" tabindex="14" class="grayout" id="testStatusDropDown"/>
</input-layout>

<input id="input1" type="checkbox">

请注意，v-if="edit"结果为 true。

在mounted生命周期挂钩中我有：

mounted () {
      this.$nextTick(function (){
      console.log(document.getElementById("input1"))
      console.log(document.getElementById("testStatusDropDown"))
    })
  },

console.log最初我在 Mounted 方法中没有导致null和 的input1语句testStatusDropDown。我理解这一点，因为当该部分代码运行时，这两个元素还不存在。所以然后我将它们移到了 Mounted 方法中，现在，我可以看到，<input id="input1" type="checkbox">但对于我得到的第二条日志语句null。

我访问了 vue js Mounted api 文档，可以在这里找到： https: //v2.vuejs.org/v2/api/#mounted。据我所知，这并mounted不能保证所有子组件都已安装，因此我需要在方法this.$nextTic内部使用mounted。然而，即使添加后，this.$nextTick我仍然遇到同样的问题，当我期望它document.getElementById("testStatusDropDown")是.null<u-select v-model='test.status' :options="testStatus" tabindex="14" class="grayout" id="testStatusDropDown"/>

我的期望不正确吗？我需要改变什么才能document.getElementById("testStatusDropDown")不会返回null？

Answer 1

使用 ref 来引用 vuejs 中的元素。

<input id="input1" ref="input1" type="checkbox">

并在安装访问中使用：

this.$refs.input1