Passing an object as property not working in vue.js

Stencil
1

Hi,

I’m trying to pass an object as property to my webcomponent, but it’s totally ignored. I’m using stenciljs 2.4.0 and vue.js 2.

I created the following page in vue:

<template>
    <my-component :navi="myNavi" ref="myComponent"></my-component>
<template>
<script lang="ts">
...
export default class MyPage extends Vue {
    private myNavi: Navigation = { title: 'My navi' }
}
</script>

The corresponding component:

@Component({
  tag: 'my-component',
  shadow: false,
})
export class MyComponent {

  @Prop() navi: Navigation;

  render () {
    return (
      <div>
        <h1>{ this.navi.title }</h1>
      </div>
    );
  }

The navigation interface: (it’s part of the component bundle)

export interface Navigation {
  title: string
}

The navigation object is not passed into the component. The component can not be rendered, because this.navi is undefined.

To get this working I’ve to use the old JS way in my vue page:

<template>
    <my-component :navi="myNavi" ref="myComponent"></my-component>
<template>
<script lang="ts">
...
export default class MyPage extends Vue {
  private myNavi: Navigation = { title: 'My navi' }

  mounted () {
    // tslint:disable-next-line
    (this.$refs["myComponent"] as any).navi = this.myNavi;
  }
}
</script>

This actually works - the component renders ‘My navi’. But according to the documentation, passing an object has to work. So, what am I missing?

I appreciate your help.

Best regards,
Daniel

2

Using a framework to use in stencil is defeating the purpose of stencil. Doc states:

Stencil’s primary goal is to remove the need for components to be written using a specific framework’s API.

Also

Stencil’s integration with different frameworks is currently a work in progress.

So it might not work as you expect.

3

Maybe my question was a little bis misleading. I am not using vue in stencil. The webcomponents generated by stencil are used in a vue.js application.

Even if the integration into different frameworks is a work in progress, how am I supposed to pass an object? The main problem is, that nothing happens: no error, no message. Honestly, this is a little bit frustrating.