Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
neeldeep opened this issue May 2, 2020 · 9 comments
Open

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

neeldeep opened this issue May 2, 2020 · 9 comments
Assignees
@karol-f
Labels
waiting for feedback from issue author

Comments

@neeldeep
Copy link

neeldeep commented May 2, 2020

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
Copy link
Owner

karol-f commented May 2, 2020 •
edited

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
Copy link
Author

neeldeep commented May 2, 2020 •
edited

@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
Copy link
Owner

karol-f commented May 2, 2020 •
edited

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
Copy link
Author

neeldeep commented May 2, 2020

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
Copy link
Owner

karol-f commented May 2, 2020

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

@neeldeep
Copy link
Author

neeldeep commented May 2, 2020 •
edited

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
Copy link
Owner

karol-f commented Jul 1, 2020

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?

@karol-f karol-f self-assigned this Jul 1, 2020
@Mangesh-P
Copy link

Mangesh-P commented Mar 12, 2021 •
edited

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
Copy link
Owner

karol-f commented Mar 12, 2021

@Mangesh-P did You try setting it in JS? #202 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@karol-f karol-f

Labels
waiting for feedback from issue author
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@karol-f @neeldeep @Mangesh-P