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不会检查方法主体中是否有反应性属性。

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

改为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

Answer 2

试试这个：

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

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

Answer 3

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

B:B

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

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

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

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

3 个答案: