CODEWITHSUNDEEP
javascriptvue.js
Diego Gallegos
Diego Gallegos

Reputation: 1752

Pass object as prop on Vue

How do you go on passing objects as props on vue? I would imagine this would be a simple task but apparently not.

I have the following code on a .vue file:

<template>
  <div id="scatter"></div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: () => ({}),
    },
  },
  mounted() {
    console.log(this.data);
  },
};
</script>

On html I try to pass the data props as follows :

<component :data="{x:1}"></component>

When I try log it into the console the result is only an empty observer object.

Upvotes: 65

Views: 122749

Answers (4)

twostepdevelopers
twostepdevelopers

Reputation: 73

100% Working Passing object is very simple way from one component to another component.

Child component Code simple code where StokDetail is an object passing from
other component

  export default {  
     props: {
      StockDetail: {
         type: Object,
         default: (()=>{})
      },
  },
    created:function(){
        console.log(this.StockDetail);
    }
 }
 </script> ``` 
> Pass from Parent Component
>
<stock-detail-component v-bind:stock-detail="model.StockDetail"></stock-detail-component>

HTML attributes are case-insensitive, so when using non-string templates, camelCased prop names need to use their kebab-case (hyphen-delimited) equivalents: 
such as  StockDetail = stock-detail

you can see in this below snapshot





 


  [1]: https://i.sstatic.net/tIofC.png

Upvotes: -1

HalfWebDev
HalfWebDev

Reputation: 7648

v-bind="yourObject"

Should do on <my-component v-bind="yourObject"><my-component>

Not sure about <component></component>. Still digging into Vue. Try and let us know.

Upvotes: 11

exclsr
exclsr

Reputation: 3347

Edit: After my initial answer and creating a JsFiddle, I am not sure why the behavior you described is happening. It works when narrowed down to the use case: 

<script>
    export default {
       props: {
           ok: {
               type: Object,
               default: () => ({}),
           },
           data: {
               type: Object,
               default: () => ({})
           }
       }
     },
     mounted () { 
         console.log(this.data) // {x:1}
         console.log(this.ok) // {x:1}
     }
    }
</script>

And the HTML:

<component :ok="{x:1}" :data="{x:1}"></component>

Here is a JsFiddle that demonstrates the behavior: https://jsfiddle.net/mqkpocjh/

Upvotes: 15

Jamie Curnow
Jamie Curnow

Reputation: 794

I believe the problem is somewhere else in your code as passing an object as a prop is as simple as you imagine:

// register the component
Vue.component('component', {
  props: {
    data: {
        type: Object
    }
  },
  template: '<div>Data: {{data}}</div>',
  mounted: function () {
    console.log(this.data)
  }
})

new Vue({
  el: '#example'
})

HTML:

<div id="example">
  <component :data="{x:1}"></component>
</div>

Here's a fiddle showing it in action: https://jsfiddle.net/tk9omyae/

Upvotes: 40

Related Questions