[Vue 警告]：道具无效：道具 "scrollThreshold" 的类型检查失败。预期数字，得到字符串

Question

我的 App.vue 工具栏中一直出现此错误。

[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>

我把scrollThreshold改成了“500”，还是一样的错误。

Answer 1

使用 v-bind 或 : shorthand 传递非字符串值，如下所示：

<v-工具栏
  <b><a href="https://v1.vuejs.org/guide/syntax.html#v-bind-Shorthand" rel="noreferrer">:</a></b>scroll-threshold="777">
</v-工具栏>

如果像这样为属性传递静态值：

<v-工具栏
  颜色="pink"
  class="toolbar"
  平坦的
  <b>滚动阈值="777"</b>>
</v-工具栏>

它总是被解析为一个字符串，并将编译成这样的东西：

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

相反，您可以使用 v-bind shorthand syntax 传递 JavaScript 表达式。通常，当你想解析为模型上可用的属性时，这是有意义的，但它实际上只是评估外部引号内的任何内容作为常规 js.

因此，如果您更新为使用 :scroll-threshold="777"，777 将被计算为这样的数字：

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

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