[Vue warn]: Invalid prop: type check failed for prop "disabled". Expected Boolean, got Fun-CodePudding

I am using this code

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

where getFileExtention returns boolean

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

but its not working , still saying [Vue warn]: Invalid prop: type check failed for prop "disabled". Expected Boolean, got Function . Kindly help

CodePudding user response：

define getFileExtension as computed property :

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

then use it like :disabled="getFileExtention"

CodePudding user response：

You need to define getFileExtention as methods for this.

methods:{
getFileExtention() {
     return this.document.extension === "pdf";
   }
}

But if you want the caching ability based on reactive dependencies, you can also use computed property

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