Nativescript-vue Typescript. Adding custom component to a layout container through code

Question

I am trying to add through code, a custom component (DynamicTable) created by myself. I am using Nativescript-vue 6.0 with Typescript.

I have the following code:

import { StackLayout } from 'tns-core-modules/ui/layouts/stack-layout/stack-layout';

@Component({
    components: { DynamicTable, RowTable, CalendarComponent, CirclePhoto },
})
export default class extends BaseVue {
    $refs!: {
        calendar: CalendarComponent;
        stk_container: any;
    };
private dt: DynamicTable;

get stk_container(): StackLayout{
        return this.$refs.stk_container.nativeView;
    }

Then I am trying to add this component, with its properties:

mounted() {
    this.dt = new DynamicTable();
    this.dt.title = this.L('AdminSmallStatistic.text.1');
    this.dt.icon_left = '';
    this.dt.isIcon_left = false;
    this.dt.icon_right= 'fa-angle-down';
    this.dt.headers = headers;
    this.stk_container.addChild(this.dt);
}

Then I got an error:

Argument of type 'default' is not assignable to parameter of type 'View'.
Type 'default' is missing the following properties from type 'View': android, ios, bindingContext, borderColor, and 171 more

This is the initial code from my custom component DynamicTable:

<script lang="ts">
import { screen } from 'tns-core-modules/platform/platform';
import { Component, Prop } from 'vue-property-decorator';
import Vue from 'nativescript-vue';

@Component
export default class extends Vue {
    @Prop({ type: String, default: 'Titulo' }) title!: string;
}

I am trying to recreate the following code, but with a custom component created with Vue js.

Is DinamycTable a Vue component Or {N} one? If it's Vue, you should probably use a v-if to include it when you want. — Manoj
– Manoj, Commented Dec 14, 2019 at 23:14
is a Vue Component, I want to add through code in the mounted event. Not with v-if — Juan Bonoso
– Juan Bonoso, Commented Dec 16, 2019 at 14:32

tony19 · Accepted Answer · 2022-07-16 02:42:08Z

1

Changing approach, you could render multiple Vue dynamic components.

If you have different components:

<template>
    <StackLayout>
        <component v-for="(child, i) in children"
            :is="child.component" :key="i" v-bind="child.props" />
    </StackLayout>
</template>

<script>
import ComponentA from "~/components/ComponentA";
import ComponentB from "~/components/ComponentB";

export default {
    data() {
        children: []
    },

    mounted() {
        this.children.push({
            props: { title: "Title 1" },
            component: ComponentA
        });
        this.children.push({
            props: { title: "Title 2" },
            component: ComponentB
        });
    }
}
</script>

Inspired by this

A simpler scenario with only one component:

<template>
    <StackLayout>
        <DynamicTable v-for="(props, i) in children" :key="i" v-bind="props" />
    </StackLayout>
</template>

<script>
import DynamicTable from "~/components/DynamicTable";

export default {
    components: {
        DynamicTable
    },

    data() {
        children: []
    },

    mounted() {
        this.children.push({
            title: "Title",
            // other props
        });
    }
}
</script>

edited Jul 16, 2022 at 2:42

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 16, 2019 at 15:27

TomG

5385 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Juan Bonoso Over a year ago

Thanks for your help. So i should always try to render components in the xml code rather than pure code?

TomG Over a year ago

In my opinion, that's the easiest way to do it and one of the pros of using Vue.

TomG Over a year ago

Unless you need to determinate in real time the layout container of your child element, and I hope you don't 👀

Collectives™ on Stack Overflow

Nativescript-vue Typescript. Adding custom component to a layout container through code

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related