my props is like this

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

I tried something like this, didnt work.

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

How to set default props for such object?

my props is like this

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

I tried something like this, didnt work.

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

How to set default props for such object?

• javascript
• vue.js
• vuejs2
• vue-component

2 Answers 2

From the docs:

Object or array defaults must be returned from a factory function

So the problem is that you are not returning the default object.So you can either do:

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

Or

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

The following solution should work :

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

check this codesandbox

if the above solution doesn't work, you could use a normalized computed property :

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