current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 0 down vote favorite

How can I set a composed property (like composed_prop.foo) from HTML?

The normal_prop sets well but composed_prop.foo doesn't.

Example:

<div id="app">
      <sample normal_prop=1 composed_prop.foo=1 />
</div>


<script>

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

        composed_prop: {
            default:{
               foo: 0,
               bar: 0
            }
        }
      }
    })


    new Vue({
        el: "#app"
    })
</script>
share|improve this question
up vote 2 down vote accepted

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 };
        }
    }
  }
})
share|improve this answer
1  
Yep, it's working. Thank you very much for your awesome response and that note about the factory function, I noticed the warning, but didn't know what to do about it. – vivoconunxino Feb 26 at 9:22

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.