Vue中输入为空时如何禁用按钮？答案

【问题标题】：How to disable button when input is empty in Vue?Vue中输入为空时如何禁用按钮？
【发布时间】：2020-03-13 23:56:51
【问题描述】：

我会使用带有函数的 v-bind 将按钮绑定到输入：

我的模板中的代码：

<template>
  <input
    type="email"
    v-model="email"
    v-bind:placeholder="$t('fields.email_place_holder')"
  />
  <input
    v-bind:disabled="{ isDisable }"
    type="submit"
    v-bind:value="$t('buttons.notify_me')"
    class="notify-me-button"
  />
</template>

我的脚本中的代码：

  methods: {
    isDisable() {
      return email.lenght > 0;
    }
  }

但是button并没有改变它的状态，我尝试用同样的方法改变css样式，结果是一样的。问题是按钮第一次响应一次isDisable() 返回的值。

【问题讨论】：

尝试将isDisable 转换为计算属性，或将isDisable 替换为您正在检查的条件。即<input :disabled="email.length > 0" type="submit" v-bind:value="$t('buttons.notify_me')" class="notify-me-button" />
指令只需要值而不是语句和条件。
另外，当我使用console.log() 进行测试时，我发现该方法执行一次，而不是每次我在字段中输入。
如果您选择仅使用值而不是语句或表达式来遵循指令，则使用计算属性computed: { emailLength: function () { return this.email.lenght > 0;}} 该方法只执行一次的原因是它不是反应式的。这是被动的，会随着email 的值的变化而变化。

标签： vuejs2 binding

【解决方案1】：

该按钮未被禁用，因为绑定 disabled=isDisable 不是反应式的。

它不是响应式的，因为绑定值isDisable 不是响应式属性（在data 或computed 中）并且它不是具有任何响应式参数的方法，即它被调用一次/评估为常量@ 987654326@。 Vue 不会检查方法体中是否有响应式属性，毕竟所有方法都应该在您的代码中显式调用。

有几种方法可以解决这个问题：

将 isDisable 改为计算属性：

computed: {
  isDisable() {
    return this.email.length > 0;
  }
}

将反应性属性（例如 email）作为参数传递给您的方法，以便 Vue 知道更新绑定。

<input
  type="submit"
  :disabled="isDisable(email)"
/>

methods: {
  isDisable(email) {
    return email.length > 0;
  }
}

直接绑定包含您的反应属性 (email) 的语句或条件。这是允许的。

<input
  type="submit"
  :disabled="email.length > 0"
/>

Working example on JS Fiddle

这些将是解决此问题的明显（也许是惯用的）方法，但还有其他方法，例如使用观察者。

请注意，您提供的代码中也存在拼写错误，例如：

:disabled="{isDisable}" 是一个无效的绑定，因为花括号
isDisable(){ return email.lenght > 0 } 应该是 length 而不是 lenght

【讨论】：

【解决方案2】：

执行此操作的简单方法是检查该值是否存在。例如：

<input type="text" v-model="user.name" required />

对于提交按钮，只需使用禁用

<button type="submit" :disabled="!user.name">Submit</button>

只有当字段被填写时，提交按钮才会被启用。

【讨论】：

【解决方案3】：

试试这个：

<button type="button" class="btn btn-primary btn-sm ripple-surface" v- 
  bind:disabled='!isDisabled'>Save</button>

   computed: {
        isDisabled() {
        return this.categoryName.length > 0;
    }
},

【讨论】：