Creating dynamic elements with Nativescript-Vue

Question

Creating dynamic elements with Nativescript-Vue

Is there a way for me to dynamically generate new elements such as buttons, labels, or textfields within a layout?

Here is the code snippet I currently have:

<AbsoluteLayout ref="abs">
    <Label :text="L('UserClockIn.info.5')" top="10" left="10" />
    <Label class="stk-table-row-data" :text="clockInTimes[0]" top="10" left="100" />
    <Label class="stk-table-row-data" :text="clockInTimes[1]" top="10" left="165" />
    <Label class="stk-table-row-data" :text="clockInTimes[2]" top="10" left="230" />
</AbsoluteLayout>

I am working with nativescript-vue and typescript, and I am looking to create a new label or button element and insert it into the absolute layout.

typescript nativescript nativescript-vue

Answer 1

Answer №1

Answer found here.

import { Label } from "tns-core-modules/ui/label";

export default {
    methods: {
        addLabel() {
            var label = new Label();
            label.text = "my text";
            // label.top = 10;
            // label.left = 150;
            this.$refs.abs.nativeView.addChild(label);
        }
    }
}

By the way, have you thought about using a GridLayout for creating your grid?

Answer 2

Answer found here.

import { Label } from "tns-core-modules/ui/label";

export default {
    methods: {
        addLabel() {
            var label = new Label();
            label.text = "my text";
            // label.top = 10;
            // label.left = 150;
            this.$refs.abs.nativeView.addChild(label);
        }
    }
}

By the way, have you thought about using a GridLayout for creating your grid?

Creating dynamic elements with Nativescript-Vue

Answer №1

Similar questions

Is it possible to modify a single value in a React useState holding an object while assigning a new value to the others?

Retrieving a Promise's value for an HTML Element

Issue arises when using Ionic 7 tabs with standalone Angular components

Encountering the error message "Received 1 argument, when expecting 4" while attempting to utilize a vuex getter in TypeScript

Guide to establishing intricate conditions for TypeORM insertion

How to pass a String Array to a String literal in JavaScript

Summing values in es6 (TypeScript) without explicitly knowing their corresponding keys

Typescript type cast is not parsed by Prettier

Guide on creating a class with properties and their data types programmatically using TypeScript

Setting the initial navigation theme based on route parameters from an external source, not within the StackNavigator

Is it possible to implement drag and drop functionality for uploading .ply, .stl, and .obj files in an angular application?

Exploring Angular2: Implementing oauth2 with token headers

Implementing multiple TypeScript classes with the same interface and comparing the properties of their objects

Removing undefined elements from an array

Angularfire2 retrieve list of data with a specified number of items from the

Error: There was a problem trying to import the `.d.ts` file

Extending a Typescript interface to include the functionality of two different component

Guide to sorting through intricate structured Json information within Angular 6

What is the reason for needing to specify event.target as an HTMLInputElement?

When using the listServiceLevelObjectives function, an UnhandledPromiseRejectionWarning occurs: The error message returned is "3 INVALID_ARGUMENT