CODEWITHSUNDEEP
javascriptvue.js
WoJ
WoJ

Reputation: 29987

How to pass data to a child component?

I am learning vue.js and the answer to my question is in the documentation for dynamic props. I however fail to have in working in practice for my data structure.

My intent is to have a custom component <cell> fed with data from the Vue instance:

Vue.component('cell', {
  props: cell,
  template: '<div>day is {{ cell.name }}</div>'
})

new Vue({
  el: '#container',
  data: {
    "week": {
      "today": {
        "name": "Monday"
      },
      "tomorrow": {
        "name": "Tuesday"
      }
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>

<div id="container">
  <cell v-bind:cell="week.today"></cell>
  <cell v-bind:cell="week.tomorrow"></cell>
</div>

(this snippet does not run at all, not sure if vue.js is supported. I also have a JSFiddle to test on)

The expected result is

<div>day is Monday</div>
<div>day is Tuesday</div>

The output is empty, so I believe that there is something fundamentally wrong with my code. What is it?

Upvotes: 1

Views: 37

Answers (1)

craig_h
craig_h

Reputation: 32704

props must be an array or object, so basically:

props: ['cell']

or 

props: {
   cell: {
     // options
   }
}

but not:

props: cell

I've fixed the fiddle for you here:

https://jsfiddle.net/11cj0Lx6/3/

Upvotes: 1

Related Questions