了解如何为嵌套对象设置默认道具

时间:2018-11-04 17:53:39

标签: vue.js

我的道具就是这样

house = {
  kitchen:{
    sink: ''
  }
}

我尝试了类似的方法,没有用。

props: {
    house: {
        type: Object,
        default: () => {
            kitchen : {
                sink: ''
            }
        }
    }
},

如何为此类对象设置默认道具?

2 个答案:

答案 0 :(得分:2)

以下解决方案应该有效:

  props: {
   house: {
       type: Object,
        default: () => ({
          kitchen: {
             sink:''
            }
       })
  },
 }

选中此codesandbox

如果上述解决方案无效,则可以使用标准化的计算属性:

     props: {
         house: { type: Object }
       },
    computed: {
           normalizedHouse() {
              return {
                      kitchen:{
                         sink: ''
                        }
                     }
            }
         }

答案 1 :(得分:0)

从文档中

  

对象或数组的默认值必须从工厂函数返回

问题是您没有返回默认对象。您可以执行以下操作:

props: {
    house: {
        type: Object,
        default: () => ({ // <= note the parenthesis
            kitchen : {
                sink: ''
            }
        }) // <= here also
    }
},

props: {
    house: {
        type: Object,
        default: () => {
           return  {
              kitchen : { // <= note the return
                sink: ''
              }
           } 
        }
    }
},