Passing the Properties of an Object in Vue.js

Question

As i learnt from vue.js guide

you can use v-bind without an argument (v-bind instead of v-bind:prop-name).

I treid it, i'm not getting any value.

Vue.component('click-count',{
  data: function(){
    return{
      names: {
        firstName: 'kuldeep',
        lastName: 'Babbar'
      }
    }
  },
  template: `
    <div class="blog-post">
      <p>{{names.firstName}}</p>
    </div>
  `
})
var app = new Vue({
  el: '#root'
});

<div id="root">
  <div >
    <click-count v-bind="names"></click-count>
  </div>
</div>

** New: Forgot to add this image**

can any one explain this?

Sovalina · Accepted Answer · 2018-06-03T13:35:27.843

First, if you try to pass an object "names" from root to child click-count component, the data has to be inside the "root":

var app = new Vue({
  el: '#root',
  data(){
    return{
      names: {
        firstName: 'kuldeep',
        lastName: 'Babbar'
      }
    }
})

Now, what you do with v-bind without argument is to pass the object "names" to the component but without a named "names" argument:

<click-count v-bind="names"></click-count>

is the same as

<click-count v-bind="{ firstName: 'kuldeep', lastName: 'Babbar' }"></click-count>

Finally what you pass to your component with v-bind (with or without argument) is props and you need to declare them if you want to use them in your template.
But in your case, the click-count component doesn't know what names means:

Vue.component('click-count',{
  props:['firstName', 'lastName'],
  template: `
    <div class="blog-post">
    <p>{{ firstName }}</p>
    </div>
  `
})
var app = new Vue({
  el: '#root',
  data(){
    return{
      names: {
        firstName: 'kuldeep',
        lastName: 'Babbar'
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="root">
  <div >
    <click-count v-bind="names"></click-count>
  </div>
</div>

Edit: To explain the image you linked

As it says "If you want to pass all the properties of an object as props" means that without argument (<blog-post v-bind="post"></blog-post>), props for the "BlogPost" component are all the properties of post:

props : ['id', 'title']

used in the component template like that: <p>Title: {{ title }}</p>

VS when the "post" object is passed as props with an argument (<blog-post v-bind:post="post"></blog-post>), it's under a unique named argument (and not its properties):

props : ['post']

used in the component template like that: <p>Title: {{ post.title }}</p>

Thanks, i got this, but can you explain that image that i added. Actually i was asking about 'props'. — kvinbabbar, Jun 03 '18 at 11:42
In the image you linked if you check the page top of the guide you can see : *"This page assumes you’ve already read the [Components Basics](https://vuejs.org/v2/guide/components.html). Read that first if you are new to components."* Check [this section](https://vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props) explaining how to pass props from parent to child component. — Sovalina, Jun 03 '18 at 11:53
@Babbar i update my answer to explain the image you linked, i hope it helps. — Sovalina, Jun 03 '18 at 13:33
ok, thanks again, i got it. it means i've to add property of object (or direct object's name) as props. — kvinbabbar, Jun 04 '18 at 05:42
Your example of the receiving component (with the list of keys from the passed object) is what is missing in the docs. It is just now that I realized that I have to enumerate the keys in the props (which afterwards seem obvious, but the docs could be clearer here) — WoJ, Nov 18 '19 at 19:29

Passing the Properties of an Object in Vue.js

1 Answers1