vue 反应性问题：禁用

Question

我有一个带有计算有界 isDisabled 方法的按钮

<button :disabled="isDisabled"
        @click="saveMember"
        type="button"
        class="btn btn-primary mr-1">Invite
</button>

computed: {
  isDisabled() {
    return !this.emailValid || this.savingUser
  }
}

然后我有一个更新 emailValid 字段的方法。

methods: {
  validateEmail() {
    .......
    this.emailValid = true

当我追踪状况时，它给了我错误

{{ !emailValid || savingUser  }} //false

但我的按钮仍然被禁用。

我已尝试添加密钥

<button :disabled="isDisabled"
    @click="saveMember"
    type="button"
    class="btn btn-primary mr-1"
    :key="`${this.member.email}`">Invite
</button>

但还是不行。

Answer 1

您不要在模板标签中使用this 关键字。

试试

{{ !emailValid || savingUser  }}

编辑：另外，saveMember 是一种方法吗？您应该在 @click 监听器中将其称为 saveMember()。