vue.js pass Object to component

Question

I have 2 vue components, I would like to pass an object from the parent to the child component.

componentA

<template lang="pug">
  .wrapper
    treenode(:model=treeData)
    div -----------------
    div {{treeData}}

</template>

<script>
  import treenode from './treenode.vue'

  export default {
    props : ['items']
  , components : { treenode : treenode }
  , created(){
        this.treeData = {name:"test"}
    }
</script>

comp treenode

 export default {
    props : {
      model: {
        type : Object
      , default : function(){ return { name : "default" } }
      }
    }

model in comp treenode is always the default value

<child-component parentProp="prop" /> so the name of the prop inside the child component will be "parentProp" and contain parent viewmodels "prop" data property. — connexo
– connexo, Commented Mar 1, 2018 at 18:32

thanksd · Accepted Answer · 2018-03-01 18:37:12Z

2

You aren't passing the prop value in the child component tag correctly.

You need to wrap treeData in quotes:

treenode(:model='treeData')

answered Mar 1, 2018 at 18:37

thanksd

55.8k23 gold badges167 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

connexo Over a year ago

I hate replacement syntax like pug, coffeescript, etc... and even more so when it's indentation-based.

Collectives™ on Stack Overflow

vue.js pass Object to component

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related