Vue绑定disabled属性报错：期望Boolean却得到Function如何解决？

错误原因 #

你在disabled prop上绑定的是getFileExtention方法本身，没有执行该方法，因此传入的是函数类型，不符合其要求的布尔类型校验规则，所以抛出类型错误告警。

解决方案 #

方案一：模板中直接执行方法

给绑定的方法补充执行括号，拿到方法返回的布尔值即可：

<v-list-item>
  <v-btn
    @click="onDownloadFile(document)"
    :disabled="getFileExtention()"
    >Download as pdf</v-btn
  >
</v-list-item>

原有方法逻辑无需修改。

方案二：改为计算属性（更推荐）

该判断逻辑依赖响应式变量this.document.extension，改为计算属性可以自动响应依赖变化，性能更优：

1. 把原有方法移到computed配置项中：

computed: {
  getFileExtention() {
    // console.log(this.document.extension === "pdf");
    return this.document.extension === "pdf";
  }
}

2. 模板绑定不用加执行括号，保持原有写法即可：

<v-list-item>
  <v-btn
    @click="onDownloadFile(document)"
    :disabled="getFileExtention"
    >Download as pdf</v-btn
  >
</v-list-item>

计算属性在模板中绑定时直接使用属性名即可，Vue会自动调用其getter方法返回对应的值。

内容的提问来源于stack exchange，提问作者It's Siddiqi