vue-custom-element
vue-custom-element copied to clipboard
karol-f
Unable to Pass Object Props from Custom Component to Vue Component
It seems I can't pass Object data from Custom Element to Vue Component.
I am defining the Custom Element in Vue and then using objectProp in JS to create an Object and passing it.
In the App.vue the object appears to be undefined.
Here is what I have in main.js file of Vue Project
import Vue from 'vue'
import App from './App.vue'
import vueCustomElement from 'vue-custom-element'
Vue.config.productionTip = false
Vue.use(vueCustomElement)
Vue.customElement('sample-custom-comp', App,
{
props:
{
datatobepassed:JSON.parse(document.querySelector("sample-custom-comp").objectProp).fields
}
}
)
In App.vue file
<template>
<div id="app">
<h2> {{datatobepassed.test}} </h2>
</div>
</template>
<script>
export default {
name: 'app',
props: {
datatobepassed: { type: Object }
},
created() {
console.log('App Created')
console.log(this.datatobepassed)
}
}
</script>
In the Index.html file
<!DOCTYPE html>
<html lang=en>
<body>
<sample-custom-comp></sample-custom-comp>
<script type="text/javascript">
document.querySelector('sample-custom-comp').objectProp =JSON.stringify({ fields: {"test":"testData"} })
</script>
<script src=./sample-component.js></script> // This is the .js file generated after vue-cli-service build
</body>
</html>
I will try to check it soon. From a quick look I can see that using JSON.stringify() when passing object using JS is wrong approach - it should be just passed normally.
@karol-f I am using JSON.stringify() to pass it as a String to the Custom Element and then converting it back to a Object for the Vue Component using JSON.parse(). I can try checking by removing JSON.stringify()
Update:
I removed JSON.stringify() from index.html and moved it to main.js
So this is what the main.js looks like:
{datatobepassed:JSON.parse(JSON.stringify(document.querySelector("sample-custom-comp").objectProp)).fields}
Hi, You have example how to use object prop on e.g. https://karol-f.github.io/vue-custom-element/#/demos/binding
<demo-basic
:object-prop.prop="objectProp"
</demo-basic>
or
document.getElementsByTagName('demo-basic')[0].objectProp = {foo: 'baz'}
Does it work for You?
Hi @karol-f
I am able to pass the object to Custom Element from HTML.
Below is another way to pass it as an Object, as mentioned by you in other posts.
document.querySelector('sample-custom-comp').objectProp
The issue is passing the object back from the Custom Element to the App Vue Component using Props
Vue.customElement('sample-custom-comp', App,
{
props:
{
datatobepassed:document.querySelector("sample-custom-comp").objectProp.fields
}
// Here I am trying to pass datatobepassed as an Object to App Component which is showing undefined
})
I have uploaded the file in my GitHub Repo https://github.com/neeldeep/test-vue-custom-element
test-custom-elem.js is bundled so I have included the source map as well so you should be able to debug and see the code.
Let me know if this helps.
Update: Here is a Codesandbox link: https://codesandbox.io/s/goofy-dream-lky53
Please refer to main.js & App.Vue in the sandbox link.
I am using vue.config.js to compile which seems to be failing in the code sandbox but you should be able to see the basic code in the files. I have also included index.html in the dist folder so you should able to see how I am invoking the vue-custom-element.
Hi, sorry for the late reply - I've checked CodeSandbox and after few tweaks I can see that it works as intended - https://codesandbox.io/s/vue-template-4xy07?file=/src/components/Test.vue
Can You please take a look?
I am also getting the same problem Vue warn]: Invalid prop: type check failed for prop "config". Expected Object, got String with value "[object Object]".
@Mangesh-P did You try setting it in JS? https://github.com/karol-f/vue-custom-element/issues/202#issuecomment-622999941