[Vuejs]-Vue.js initialize object property from html

by

2👍

✅

You have to do it like this:

<div id="app">
     <sample normal_prop=1 :composed_prop="{foo:10, bar:20}" />
</div>

Note that you have to bind the composed_prop so the expression will be evaluated (rather than treating it as a literal string). Also note that passing in an object for composed_prop will completely overwrite your defaults – it won’t try to merge the properties with the defaults. So, if you only pass in {foo:10}, then composed_prop.bar will be undefined.

One final note… I think the default for an Object prop should be a factory function. Something like this:

Vue.component('sample',{
  props: {
    normal_prop: 0,

    composed_prop: {
        type: Object,
        default:function(){ // should be a function
            return { foo: 0, bar: 0 };
        }
    }
  }
})
👤Peter

Leave a comment