Nativescript Vue - binding a string to Label style attribute does not work-CodePudding

I just created a blank Nativescript Vue project (Typescript) and tried to bind a string to the type attribute of a Label - does not work (style gets completely ignored). I also tried in Nativescript Playground, same result.

Example Code is:

<template>
    <Page>
        <ActionBar title="Example" />
        <StackLayout>
            <Label style="font-size: 34" text="WORKS" />
            <Label :style="myStyle" text="DOES NOT WORK" />
        </StackLayout>
    </Page>
</template>

<script>
    export default {
        data() {
            return {
                myStyle: "font-size: 34"
            };
        }
    };
</script>
<style scoped>
</style>

You can reproduce in Nativescript Vue Playground. On my Mac I'm using Nativescript 8.1.2 with nativescript-vue 2.9.0.

I would expect it should be possible to do something like this. Any help appreciated, thank you.

CodePudding user response：

In order to use a computed style with the bind mechanic, you need a styleObject consisting of the rule-name as key, and the value as... well the value.

<template>
    <Page>
        <ActionBar title="Example" />
        <StackLayout>
            <Label style="font-size: 34" text="WORKS" />
            <Label :style="myStyle" text="DOES NOT WORK" />
        </StackLayout>
    </Page>
</template>

<script>
    export default {
        data() {
            return {
                myStyle: {
                  font-size: '34px'
                },
            };
        }
    };
</script>
<style scoped>
</style>

CodePudding user response：

Can you check it this way is 100% working. The object syntax is often used in conjunction with computed properties that return objects.

<template>
    <Page>
        <ActionBar title="Example" />
        <ScrollView>
            <StackLayout>
                <Label style="font-size: 34" text="WORKS" />
        <Label :style="styleObject" text="DOES NOT WORK" />
            </StackLayout>
        </ScrollView>
    </Page>
</template>
<script>
    export default {
        data() {
            return {
                styleObject:{
              font-size: '34px'
            },
            };
        }
    };
</script>