javascript - 如果值没有改变，vue js禁用输入

Question

我有一个带有初始值的输入:

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

但是，disabled 绑定(bind)会出现错误:无法读取未定义的属性 defaultValue。 在不向 vm.data 发送太多垃圾邮件的情况下执行此操作的最佳方法？

Answer 1

错误:

Cannot read property defaultValue of undefined

是因为 ref 这么快就无法使用:

An important note about the ref registration timing: because the refs themselves are created as a result of the render function, you cannot access them on the initial render - they don’t exist yet! $refs is also non-reactive, therefore you should not attempt to use it in templates for data-binding.

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

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

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

但先别高兴。

defaultValue不会有你想象的值(value)

当使用v-model时, defaultValue实际上将始终为空字符串( "" )，因为 Vue 最初渲染 <input>具有空值。

要像您想要的那样在禁用按钮中使用变量，我的建议是:使用 mouted()逻辑“保存”初始值，并在按钮模板中与其进行比较，而不是 defaultValue .

下面是演示。

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

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

替代方案:完全使用 Vue

当然，如果可能的话，您应该利用 Vue 的数据驱动响应特性，因为处理 DOM 总是很棘手。

解决方案是创建另一个变量并将其填充到 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为相同的初始值，mounted()上面的逻辑甚至没有必要。