Vuejs2 当Vue中的输入为空时，如何禁用按钮？

我将使用带函数的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 }}

---

但是

按钮

没有改变它的状态，我尝试用同样的方法改变css样式，结果是一样的。问题是按钮在

isDisable（）返回的第一个值上响应一次

该按钮未被禁用，因为绑定

disabled=isDisable

不是反应性的

它不是反应性的，因为绑定值

isDisable

不是反应性属性（在

data

或

computed

中），并且它不是一个具有任何反应性参数的方法，即它被调用一次/计算为常量

false

。在代码中显式调用所有方法之后，Vue不会检查方法体中是否有反应属性

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

将

isDisable

改为计算属性：

将被动属性（例如，

电子邮件

）作为参数传递给您的方法，以便Vue知道如何更新绑定

直接绑定包含被动属性的语句或条件（

email

）。这是允许的

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

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

• ：disabled=“{isDisable}

  是无效的绑定，因为有大括号

• isDisable（）{return email.lenght>0}

  应该是

  length

  而不是

  lenght

试试这个：

保存

计算：{
isDisabled（）{
返回this.categoryName.length>0；
}
},

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

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

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

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

提交

---

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

尝试将

isDisable

转换为计算属性，或者用您正在检查的条件替换

isDisable

。即

指令只需要值，而不需要语句和条件。另外，当我使用

console.log（）进行测试时

我发现该方法执行一次，而不是每次我在字段中键入时都执行一次。如果您选择只使用值而不使用语句或表达式来遵循指令，请使用计算属性

computed:{emailLength:function（）{return this.email.lenght>0；}

该方法只执行一次的原因是它不是被动的。这是被动的，并且会随着

电子邮件的值的变化而变化。
methods: {
  isDisable(email) {
    return email.length > 0;
  }
}

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

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

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