如果值没有改变，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

错误：

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`不会有你想象的价值

当使用 v-model 时，defaultValue 实际上总是空字符串 ("")，因为 Vue 最初使用空值呈现 <input>。

要在禁用的按钮中使用变量，我的建议是：使用 mouted() 逻辑来 "save" 初始值，并在按钮模板中与其进行比较，而不是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 的 data-driven 响应式特性，因为 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() 逻辑。

Answer 2

我的解决方案可能比使用禁用标志更冗长。但我会使用： @click.prevent="submit"

然后制作一个提交方法来处理检查，return如果输入没有改变则为false。

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

vue js disable input if value hasn't changed

javascript

binding

disabled-input

vue.js

vuejs2

`defaultValue`不会有你想象的价值

备选方案：一路走Vue

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

vue js disable input if value hasn't changed

javascript

binding

disabled-input

vue.js

vuejs2

defaultValue不会有你想象的价值

备选方案：一路走Vue

`defaultValue`不会有你想象的价值