Passing properties other than strings don't seem to work?? #69
Description
I am trying to pass a list of items to a web-component but internally it seems to have converted it to a String... ??
So for example in the code below I wish to pass two properties: a 'msg' (String) and an 'items' (Array).
// wrap my VueWebComponent into a web-component
const CustomElement = wrap(Vue, VueWebComponent);
// and register this with the window...
window.customElements.define('my-custom-element', CustomElement);
// get an element from the index.html that I wish to inject the following Vue instance into
let elName = document.getElementsByClassName("v1")[0];
let vm = new Vue({
el: elName,
template: `
<div>
<my-custom-element :msg="this.d1" :items="this.items" @pause="paused"></my-custom-element>
</div>
`,
data() {
return {
d1: "Hello",
items: [
{ name: 'Marcel', age: 51 },
{ name: 'Deniz', age: 46 }
]
};
},
methods: {
paused() {
this.d1 = "Paused";
}
}
});Unfortunately when I try to access the props inside the VueWebComponent code I find:
msg = "Hello"
items = "[object Object],[object Object]"
Any help much appreciated!
This is the code for the VueWebComponent.vue
<template>
<div class="mywc">
<h4>My Vue Web Component</h4>
<button @click="doPause">Pause</button>
<div>{{ msg }} {{ counter }}</div>
</div>
</template>
<script>
export default {
props: ["msg", "items"],
data() {
return {
counter: 0,
name: "marcel"
};
},
methods: {
doPause() {
this.counter++;
// this works beautifully with Vue but with React we have to attach
// custom listeners....
this.$emit("pause", { name: this.name });
}
}
};
</script>