CODEWITHSUNDEEP
javascripthtmlvue.js
isexxx
isexxx

Reputation: 815

How can I pass object to Vue Component?

I wanna call Vue Component with data object.

todo-item tag works. todo-item2 tag makes nothing. I expect same result.

HTML:

<div id="app">
  <todo-item
  v-bind:text="todo.text"
  v-bind:is-complete="todo.isComplete"></todo-item>
  <todo-item2 v-bind:="todo"></todo-item2>
</div>

Script:

var Todo = {
  props: ['text', 'isComplete'],
  template: '<p>{{ text }} : {{ isComplete }}</p>'
}

var Todo2 = {
  props: ['todo'],
  template: '<p>{{ todo.text }} : {{ todo.isComplete }}</p>'
}

new Vue({
  el: '#app',
  data: {
    todo: {
        text: 'Learn Vue',
        isComplete: false
        },
  },
  components: {
    todoItem: Todo,
    todoItem2: Todo2,
  }
})

I think it doesn't recognize 'text' in todo-item2.

Console:

TypeError: Cannot read property 'text' of undefined
    at Proxy.eval (eval at createFunction (VM218 vue.js:10518), <anonymous>:2:43)
    at VueComponent.Vue._render (VM218 vue.js:4465)
    at VueComponent.updateComponent (VM218 vue.js:2765)
    at Watcher.get (VM218 vue.js:3113)
    at new Watcher (VM218 vue.js:3102)
    at mountComponent (VM218 vue.js:2772)
    at VueComponent.Vue$3.$mount (VM218 vue.js:8416)
    at VueComponent.Vue$3.$mount (VM218 vue.js:10777)
    at init (VM218 vue.js:4059)
    at createComponent (VM218 vue.js:5499)

Upvotes: 0

Views: 2373

Answers (1)

Ivan Vilanculo
Ivan Vilanculo

Reputation: 668

You forgot to instruct the v-bind witch property are you binding soo insted of <todo-item2 v-bind:="todo"></todo-item2> shound be <todo-item2 v-bind:todo="todo"></todo-item2>

var Todo = {
  props: ['text', 'isComplete'],
  template: '<p>{{ text }} : {{ isComplete }}</p>'
}

var Todo2 = {
  props: ['todo'],
  template: '<p>{{ todo.text }} : {{ todo.isComplete }}</p>'
}

new Vue({
  el: '#app',
  data: {
     todo: {
        text: 'Learn Vue',
        isComplete: false
     }
  },
  components: {
    todoItem: Todo,
    todoItem2: Todo2,
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  <todo-item
  v-bind:text="todo.text"
  v-bind:is-complete="todo.isComplete"></todo-item>
  <todo-item2 v-bind:todo="todo"></todo-item2>
</div>

Upvotes: 1

Related Questions