CODEWITHSUNDEEP
javascriptvue.jsvue-componentweb-componentvue-directives
Carlos De La Cuerda Gomez
Carlos De La Cuerda Gomez

Reputation: 13

How to pass an object to a web component generated width Vue?

My component has to render an object to fill the content. When I am working in the Vue project, I have not problem to pass this object with

<my-compnent :card="card"></my-component>

But when I tried to use the built component, it doesn't read "MyCard" as an object, ir reads as a string... please, some help

I have tried in the same way that vue, using :card but it doesn´t work, if I only use card="card" it get access to the component but without the object

My code:

<script>
 card =
     {
        name: 'card',
        graphic: 'https://static.anychart.com/images/gallery/v8/line-charts-line-chart.png',
        subtitle: 'about this card',
        info: 'this is a test content card',
        selector1: [
          { name: 'opt 1' },
          { name: 'opt 2' },
          { name: 'opt 3' }
        ],
        selector2: [
          { name: 'opt A' },
          { name: 'opt B' },
          { name: 'opt C' }
        ]
      }
</script>
<script src="https://unpkg.com/vue"></script>
<body>
   <my-component card="card"></card>
</body>

And the error:

[Vue warn]: Invalid prop: type check failed for prop "card". Expected Object, got String with value "card".

Also I have tried

<my-component :card="card"></card>

but this only works in a vue project, not in exported web-components. It gives this error:

[Vue warn]: Error in render: "TypeError: can't access property "name", _vm.card is undefined"

Upvotes: 1

Views: 1138

Answers (2)

alerya
alerya

Reputation: 3175

<my-element :user.prop="{ name: 'jack' }"></my-element>

<!-- shorthand equivalent -->
<my-element .user="{ name: 'jack' }"></my-element>

Upvotes: 0

Mythos
Mythos

Reputation: 1482

card="card" will pass the string 'card' as value to the card attribute. If you want to pass a JS object tp an exported web component outside Vue, then you'll have to do it in JS itself.

<script>
 const card =
     {
        name: 'card',
        graphic: 'https://static.anychart.com/images/gallery/v8/line-charts-line-chart.png',
        subtitle: 'about this card',
        info: 'this is a test content card',
        selector1: [
          { name: 'opt 1' },
          { name: 'opt 2' },
          { name: 'opt 3' }
        ],
        selector2: [
          { name: 'opt A' },
          { name: 'opt B' },
          { name: 'opt C' }
        ]
      }
  let comp = document.querySelector('my-component')
  comp.card = card
</script>
<body>
   <my-component card="card"></card>
</body>

You can use v-bind:card or simply ':card' only if you're working inside vue project, in which case you don't need to use exported component. But in this case the object card needs to be passed to the data property of your Vue instance, otherwise Vue can't find it. This is why you get the error.

<script>
const app = new Vue({
  el: '#app',
  data: {
    card,
  },
}
</script>

Upvotes: 3

Related Questions