Vue.js值未变更时禁用提交按钮及refs报错解决方法

这个报错的核心原因很明确：Vue组件在首次渲染时，$refs对象还没被填充——$refs是在组件mounted钩子执行之后才会完成赋值的，所以你直接在模板里访问$refs.input.defaultValue时，$refs.input还是undefined，自然会触发"Cannot read property 'defaultValue' of undefined"的错误。

结合你"不大量增加vm.data"的需求，给你几个最优解决方案，按改动量从小到大排序：

方案1：使用ES可选链操作符（推荐，改动最小） #

直接在模板里用?.操作符做安全访问，不需要添加任何额外的data或钩子函数，一行代码搞定：

<input type="text" v-model="name" ref="input" /> 
<button type="submit" :disabled="$refs.input?.defaultValue === $refs.input?.value">Submit</button>

?.的作用是：如果左侧的$refs.input是undefined或null，就直接返回undefined，不会继续访问后面的defaultValue/value，完美避免报错。当组件挂载完成后，$refs.input存在，就能正常比较两个值了。

方案2：模板内条件判断（兼容旧环境） #

如果你的项目环境不支持ES2020的可选链，可以在模板里加个简单的条件判断，默认初始状态下按钮保持禁用：

<input type="text" v-model="name" ref="input" /> 
<button type="submit" :disabled="$refs.input ? ($refs.input.defaultValue === $refs.input.value) : true">Submit</button>

初始渲染时$refs.input不存在，按钮设为禁用；组件挂载后，就会根据输入值和默认值的对比来控制禁用状态。

方案3：直接对比v-model绑定值与初始常量 #

既然你已经用v-model绑定了name，可以把初始值存为一个实例常量（不需要新增data属性），直接对比name和初始值，完全避开$refs的问题：

<template>
  <input type="text" v-model="name" ref="input" /> 
  <button type="submit" :disabled="name === initialName">Submit</button>
</template>

<script>
export default {
  data() {
    return {
      name: '你的初始值'
    }
  },
  created() {
    // 把初始值存为实例属性，不需要放到data里
    this.initialName = this.name;
  }
}
</script>

这种方式更直观，也不需要依赖DOM元素的defaultValue，逻辑完全在Vue实例层面处理，适合需要更严谨逻辑的场景。

内容的提问来源于stack exchange，提问作者user3599803