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

Question

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

Answer 1

define getFileExtension as computed property :

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

then use it like :disabled="getFileExtention"

Answer 2

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";
       }
    }

Answer 3

Add Boolean(getFileExtension) in your :disabled, this way you are saying that your variable is a boolean, and the warning will disappear.

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

Answer 4

The problem is that you're setting the disabled prop to a function, instead of to the results of that function. :disabled="getFileExtention" (adding quotes) note the function is never called.

To call the function, you'd do this: :disabled="getFileExtention()" and the function will be called any time the template is rendered.

That's probably not what you want though. Instead you want the template to render when the result of getFileExtention. For that, @Boussadjra Brahim's solution is what you want: make getFileExtention a computed property:

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

(and you might as well use a more descriptive name as well)