search

karol-f / vue-custom-element

Vue Custom Element - Web Components' Custom Elements for Vue.js
https://karol-f.github.io/vue-custom-element/
MIT License
1.97k stars 187 forks source link

Cannot use dynamic props #205

Closed Drewdan closed 4 years ago

Drewdan commented 4 years ago

Hello, I am trying to use the custom element wrapper, and I am not sure if I am making a mistake, or if this is expected behaviour.

I am trying to pass in a dynamic prop:

<ds-chat
      :queues="[
        {
          name: 'Test Queue',
          uuid: 'qwetrt-gfdgg-fdgdfg-fdgdfgfd',
        },
        {
          name: 'Another Queue',
          uuid: 'qwetrt-gfdgg-fdgdfg-fdgdfgfd',
        }
      ]"></ds-chat>

In my dev tools, this appears as undefined. If I remove the colon from before queues, it appears as a string. Is this expected behaviour?

karol-f commented 4 years ago

You are using :queues inside Vue app, right? Colon in attribute name is only for Vue. If You are trying it in plain HTML/Vanilla JS it will not work. Also in Vue, if You are using :queues use prop modifier, so :queues.prop.

You can also just use JS to set this props - https://karol-f.github.io/vue-custom-element/#/demos/binding (Plain JavaScript binding usage).

Regards.

Drewdan commented 4 years ago

Got it, sorry, my misunderstanding :) Cheers for replying to quick