Unable to Pass Object Props from Custom Component to Vue Component

neeldeep commented 4 years ago

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>

karol-f commented 4 years ago

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.

neeldeep commented 4 years ago

@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}

karol-f commented 4 years ago

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?

neeldeep commented 4 years ago

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
})

karol-f commented 4 years ago

Can You just prepare CodeSandbox with that? It will be easier.

neeldeep commented 4 years ago

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.

karol-f commented 4 years ago

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?

Mangesh-P commented 3 years ago

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]".

Screen Shot 2021-03-11 at 11 51 29 PM

karol-f commented 3 years ago

@Mangesh-P did You try setting it in JS? https://github.com/karol-f/vue-custom-element/issues/202#issuecomment-622999941

karol-f / vue-custom-element

Unable to Pass Object Props from Custom Component to Vue Component #202