Vue props中Object和Array设置默认值操作

我就废话不多说，看代码吧~

seller: {
  type: Object,
  default() {
   return {}
  }
}
seller: {
  type: Object,
  default: function () {
    return {}
 }
}

当父组件没有传这个值或者值是空时，输出的话，返回：

下面这种是错误的

seller: {
  type: Object,
  default: () => {}
}

当父组件没有传这个值或者值是空时，输出的话，这时是返回underfind，在template中获取里面的值时，就报错。

补充知识：解决vue props 默认值为数组或对象时报错的问题

简单粗暴直接上代码：

// 这些写时会报错 Type of the default value for 'record' prop must be a function
 props: {
  record: {
   type: Array,
   default: []
  }
 }

// 正确应该这样写
// 因为vue规定，对象或数组默认值必须从一个工厂函数获取
 props: {
  record: {
   type: Array,
   default: function () {
     return []
   }
  }
}

以上这篇Vue props中Object和Array设置默认值操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue中用props给data赋初始值遇到的问题解决

    前言 前段时间做一个运营活动的项目,上线后产品反馈页面埋点不对,在排查过程中发现,问题竟然是由于Vue中的data初始值导致,而data的初始值来自于props.为方便描述,现将问题抽象如下: 一.现象 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用props初始化data中变量</title>

  • 详解Vue内部怎样处理props选项的多种写法

    开发过程中,props 的使用有两种写法: // 字符串数组写法 const subComponent = { props: ['name'] } // 对象写法 const subComponent = { props: { name: { type: String, default: 'Kobe Bryant' } } } Vue在内部会对 props 选项进行处理,无论开发时使用了哪种语法,Vue都会将其规范化为对象的形式.具体规范方式见Vue源码src/core/util/options

  • Vue组件中prop属性使用说明实例代码详解

    Prop 的大小写 (camelCase vs kebab-case) HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符.这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名: Vue.component('blog-post', { // 在 JavaScript 中是 camelCase 的 props: ['postTitle'], template: '<h

  • Vue props用法详解(小结)

    Vue props用法详解 组件接受的选项之一 props 是 Vue 中非常重要的一个选项.父子组件的关系可以总结为: props down, events up 父组件通过 props 向下传递数据给子组件:子组件通过 events 给父组件发送消息. 父子级组件 比如我们需要创建两个组件 parent 和 child.需要保证每个组件可以在相对隔离的环境中书写,这样也能提高组件的可维护性. 这里我们先定义父子两个组件和一个 Vue 对象: var childNode = { templat

  • Vue props中Object和Array设置默认值操作

    我就废话不多说,看代码吧~ seller: { type: Object, default() { return {} } } seller: { type: Object, default: function () { return {} } } 当父组件没有传这个值或者值是空时,输出的话,返回: 下面这种是错误的 seller: { type: Object, default: () => {} } 当父组件没有传这个值或者值是空时,输出的话,这时是返回underfind,在template

  • element-ui中的select下拉列表设置默认值方法

    element-ui中的select下拉列表如何设置默认值? 在element-ui的运用中,涉及到了select下拉列表.项目中需要将select的默认值给展示出来 那如何修改呢? 上element-ui中的代码片段 <template> <el-select v-model="value" placeholder="请选择"> <el-option v-for="item in options" :key=&qu

  • Angular2中select用法之设置默认值与事件详解

    本文主要给大家介绍了Angular2中select用法之设置默认值与事件的相关内容,分享出来供大家参考学习,下面来看看详细的介绍: 一.设置默认值: 现在有三个学生小明,小红,小黑,对双向绑定的student设置你想要的select值就可以在下拉框默认选中 code1: 设置"请选择"为默认项,只需要把变量student设置为'',即可默认到"请选择",需要注意的是 <option value="">请选择</option>

  • 使用jQuery给input标签设置默认值

    由于项目需求,简单地写了一个input默认值设置,实现给.form中所有的input设置默认值的方法. <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>input默认值设置</title> <script type="text/javascript" src="http://apps.bdimg.com/li

  • java 如何给对象中的包装类设置默认值

    目录 给对象中的包装类设置默认值 处理方法如下 java属性的默认值 给对象中的包装类设置默认值 处理方法如下 主要适用于,对象中使用了包装类,但是不能给null需要有默认值的情况 /** * 处理对象中包装类,因为快捷签没有用包装类 * * @param object 对象 */ public static void handleParamDefault(Object object) { Class<?> aClass = object.getClass(); Field[] declare

  • 基于vue.js中关于下拉框的值默认及绑定问题

    一.今天遇到vue中下拉框问题,故而写点东西留个脚印 <template> <select v-model='selected' @click="disable()"> <option v-for="(option,index) in options" v-bind:value="option.value" :disabled="option.disabled"> {{ option.tex

  • mysql中datetime类型设置默认值方法

    通过navicat客户端修改datetime默认值时,遇到了问题. 数据库表字段类型datetime,原来默认为NULL,当通过界面将默认值设置为当前时间时,提示"1067-Invalid default value for 'CREATE_TM'",而建表的时候,则不会出现这个问题,比如建表语句: CREATE TABLE `app_info1` ( `id` bigint(21) unsigned NOT NULL AUTO_INCREMENT COMMENT '主键ID', `a

  • 动态设置django的model field的默认值操作步骤

    问题背景 django的model field需要动态设置默认值,具体案例如下: 原始代码如下,model是Application,其中字段ignore_fort的默认值设置为False class Application(TimestampedModel): name = models.CharField(max_length=255, null=True) ignore_fort = models.BooleanField(default=False) 然而现在有这样一个需求:default

  • @RequestParam使用defaultValue属性设置默认值的操作

    @RequestParam使用defaultValue属性设置默认值的操作

    @RequestParam使用defaultValue属性设置默认值 注意设置必须是string类型的,框架自己会做转换 @RequestParam(value = "page", required = false, defaultValue = "1") Integer page, @RequestParam(value = "size", required = false) Integer size, 补充:@RequestParam注解的使

  • 解决antd 表单设置默认值initialValue后验证失效的问题

    方法一: getFieldDecorator没有第三个参数,如果写了3个参数就会出错 错误代码: <Form.Item> { getFieldDecorator('userName', { initialValue: 'Tom' },{ rules: [{ required: true, message: '请输入用户名', }], })( <Input placeholder='请输入用户名'/> ) } </Form.Item> 正确代码: <Form.Ite

随机推荐