VueJS 使用带有 NULL 和“未定义"值的 Prop 类型验证?

Vuejs

关注

发信

关注(28)粉丝(399)

VueJS 使用带有 NULL 和“未定义"值的 Prop 类型验证?

本文介绍了VueJS 使用带有 NULL 和“未定义"值的 Prop 类型验证?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

即使 VueJS 2 官方文档关于 prop 验证说明(作为代码示例的注释行):

//基本类型检查(null 和 undefined 值将通过任何类型验证)

我在使用此代码复制时遇到以下错误 — 为什么会这样?

[Vue 警告]:无效的道具:道具值"的类型检查失败.预期字符串、数字、布尔值，得到 Null

<div><h1>{{title}}:</h1><MyInput :value="null"/>

<脚本>Vue.component('MyInput', Vue.extend({道具: {价值: {类型:[字符串，数字，布尔值]，要求:真实，},},模板:`<select v-model="value"><option value="null">空值</选项><选项值="">空值</选项></选择>`,}));导出默认{数据:() =>({标题:'VueJS 使用带有 NULL 和 `undefined` 值的 Prop 类型验证?}),};

解决方案

这仅适用于未设置 required: true 的情况.在您的代码中，您说需要道具，因此 Vuejs 显示警告

Even though VueJS 2 official documentation about prop validation is stating (as a code example's comment line):

I'm getting the following error with this code reproduction — why is that?

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

<template>
  <div>
    <h1>{{ title }}:</h1>
    <MyInput :value="null" />
  </div>
</template>

<script>
Vue.component('MyInput', Vue.extend({
  props: {
    value: {
      type: [String, Number, Boolean],
      required: true,
    },
  },
  template: `
    <select v-model="value">
      <option value="null">
        null value
      </option>
      <option value="">
        Empty value
      </option>
    </select>`,
}));

export default {
  data: () => ({
    title: 'VueJS Using Prop Type Validation With NULL and `undefined` Values?'
  }),
};
</script>

解决方案

This applies only when required: true is NOT set. In your code, you are saying that the prop is required and so Vuejs is showing the warning

这篇关于VueJS 使用带有 NULL 和“未定义"值的 Prop 类型验证?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

10-12 08:17