Javascript + Vue 问题：“无法读取 null 的属性‘值’”

Question

下面我有一个输入，我尝试将其值分配给变量

v

。阅读类似帖子后我的理解是，当页面初始化时，输入的值为

null

，因此无法读取。

<template>
  <div>
    <input type="text" id="input"/>
    {{ v }}
  </div>
</template>

<script>
export default {
  data(){
    return { v: document.getElementById("input").value }
  },
}
</script>

立即弹出两个问题：

• 为什么

  v: null

  不会导致错误？是不是和上面的代码是等价的？
• 将输入值分配给变量的正确方法是什么？

Answer 1

因为

DOM

在

data

函数中不可用。使用

mounted

访问 DOM。