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

标签 javascript vue.js binding vuejs2 disabled-input

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

<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 发送太多垃圾邮件的情况下执行此操作的最佳方法?

最佳答案

错误:

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>

或者,如果您可以同时设置 namedefaultName为相同的初始值,mounted()上面的逻辑甚至没有必要。

关于javascript - 如果值没有改变,vue js禁用输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49592631/

相关文章:

javascript - 重写下划线_.uniq

javascript - 如何使用 JS 从 div 元素中删除所有子元素

html - 列数未知/宽度相同的 CSS 网格布局

javascript - 我们如何在 Nuxt?Vuejs 项目中仅包含来自 lodash 的必需模块?

javascript - Adblocker 屏蔽了我的 Angular 网站 (Google Analytics)

javascript - JS :Select and move a specific div to front

css - 如何设置组件最大高度?

wpf - 未选中时,我的复选框返回 NULL

c# - 如何将 IEnumerable<string> 绑定(bind)到 ListBox?

wcf - 合约需要 Session,但 Binding ‘WSHttpBinding’ 不支持它或未正确配置以支持它