如果值未更改，则vue js禁用输入

Question

我有一个初始值的输入：

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

但是disabled绑定会出错：Cannot read property defaultValue of undefined。 最好的方法是在没有垃圾邮件vm.data的情况下做到这一点吗？

Answer 1

错误：

  

无法读取未定义的属性defaultValue

是因为ref很快就不可用了：

  

关于ref注册时间的重要说明：因为refs   它们本身是由渲染函数创建的，你不能   在初始渲染时访问它们 - 它们还不存在！ $refs是   也是非反应性的，因此你不应该尝试使用它   数据绑定模板。

当您将其添加到button的模板时，它会尝试过早使用它。

解决方法是添加一个简单的条件：

<button type="submit" :disabled="!$refs.input || $refs.input.defaultValue == $refs.input.value">Submit</button>

但是现在还不开心。

defaultValue没有您想要的值

使用v-model时，defaultValue实际上始终为空字符串（""），因为Vue最初会使<input>呈现空值。

要在禁用按钮中使用变量，我的建议是：使用mouted()逻辑“保存”初始值，并在按钮模板中与其进行比较，而不是{{1} }。

下面的演示。

defaultValue

new Vue({
  el: '#app',
  data: {
    name: 'Hello Vue.js!'
  },
  mounted() {
    this.$refs.input.dataset.defVal = this.$refs.input.value;
  }
})

替代方案：一直到Vue

当然，如果它是可能的，你应该利用Vue的数据驱动的反应性质，因为处理DOM总是很棘手。

解决方案是创建另一个变量并将其填充到<script src="https://unpkg.com/vue"></script> <div id="app"> <p>{{ name }}</p> <input type="text" v-model="name" ref="input" /> <button type="submit" :disabled="!$refs.input || $refs.input.dataset.defVal == $refs.input.value">Submit</button> </div>：

mounted()

new Vue({
  el: '#app',
  data: {
    name: 'Hello Vue.js!',
    defaultName: null
  },
  mounted() {
    this.defaultName = this.name;
  }
})

或者，如果您可以将<script src="https://unpkg.com/vue"></script> <div id="app"> <p>{{ name }}</p> <input type="text" v-model="name"/> <button type="submit" :disabled="name == defaultName">Submit</button> </div>和name设置为相同的初始值，则甚至不需要上面的defaultName逻辑。

Answer 2

我的解决方案可能比使用禁用标志更加冗长。但我会用： @ click.prevent =＆＃34;提交＆＃34;

然后创建一个提交方法来处理检查，如果输入没有改变则返回false。