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

Question

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

我的模板中的代码：

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

我的脚本中的代码：

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

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

Answer 1

按钮没有被禁用，因为绑定disabled=isDisable不是反应性的。

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

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

1. 做isDisable一个计算的属性，而不是：

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

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

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

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

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

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

JS Fiddle 上的工作示例

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

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

• :disabled="{isDisable} 由于花括号，是无效的绑定
• isDisable(){ return email.lenght>0 }}应该是length不lenght

Answer 2

最简单的方法是检查该值是否存在。例如：

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

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

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

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