[Vue warn]: Invalid prop: type check failed for prop "scrollThreshold". Expected Number, got String

Question

I keep getting this error in my App.vue toolbar.

[Vue warn]: Invalid prop: type check failed for prop "scrollThreshold". >Expected Number, got String.

<v-toolbar 
  dark color="pink darken-4" 
  class="toolbar"
  flat 
  fixed
  scroll-off-screen
  scroll-threshold=500>
</v-toolbar>

I changed the scrollThreshold to "500" and the error is the same.

Answer 1

Use v-bind or the : shorthand to pass in non-string values like this:

<v-toolbar  
  :scroll-threshold="777">
</v-toolbar>

---

If you pass in a static value for the attribute like this:

<v-toolbar  
  color="pink" 
  class="toolbar"
  flat 
  scroll-threshold="777">
</v-toolbar>

It is always parsed as just a string and will compile into something like this:

_c("v-toolbar", {
  staticClass: "toolbar",
  attrs: {
    color: "pink",
    flat: "",
    "scroll-threshold": "777"
  }
}),

Instead, you can use the v-bind shorthand syntax to pass in a JavaScript expression. Normally, this makes sense when you want to resolve to a property available on the model, but it really just evaluates whatever is inside of outer quotes as regular js.

So if you update to use :scroll-threshold="777", the 777 will be evaluated as a number like this:

_c("v-toolbar", {
  staticClass: "toolbar",
  attrs: {
    color: "pink",
    flat: "",
    "scroll-threshold": 777
  }
}),