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

Question

我会使用带有函数的 v-bind 将按钮绑定(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()返回的第一个值上响应一次.

Answer 1

该按钮未被禁用，因为绑定(bind) disabled=isDisable不是 react 性的。
它不是 react 性的，因为绑定(bind)值 isDisable不是 react 属性(在 data 或 computed 中)并且它不是具有任何 react 参数的方法，即它被调用一次/评估为常数 false . Vue 不会检查方法体中是否存在 react 性属性，毕竟所有方法都应该在您的代码中显式调用。
有几种方法可以解决此问题:

制作 isDisable一个计算属性:

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

将 react 属性(例如 email )作为参数传递给您的方法，以便 Vue 知道更新绑定(bind)。

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

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

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

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

Working example on JS Fiddle
这些将是解决此问题的明显(也许是惯用的)方法，但还有其他方法，例如使用观察者。
请注意，您提供的代码中也有拼写错误，例如:

:disabled="{isDisable}"由于大括号

是无效绑定(bind)

isDisable(){ return email.lenght > 0 }应该是 length不是 lenght