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

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

• javascript
• vue.js
• vuetify.js

5 Answers 5

define getFileExtension as puted property :

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

then use it like :disabled="getFileExtention"

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 puted property:

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

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

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 puted property

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

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>

I got similar error messages, though the code was working.

<v-btn
  ...
  :disabled="mymethod"
  ...
>
</v-btn>

"mymethod" was returning a 1 or 0 and I was expecting that this be interpreted as true or false in v-btn. While, it was interpreting this, it also threw error messages in the background.

In "mymethod", as suggested above, I used Boolean(return value). This stopped the error messages.

https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean

The Boolean object is an object wrapper for a boolean value. The value passed as the first parameter is converted to a boolean value, if necessary.