nativescript vue for loop on label - PullRequest
Новая
       12

nativescript vue for loop on label

0 голосов
/ 10 января 2019

Я использую nativescript vue, и мне интересно, как сделать цикл for .. Код, который у меня сейчас есть: 

<template>
    <GridLayout columns="0" rows="*,*,*">
        <Label :text="title" for="title in titles"/>
    </GridLayout>
</template>

<script>
    export default {
        data() {
            return {
                titles: ['foo', 'bar', 'test']
            }
        }
    }
</script>

Я получаю ошибку: [Vue warn]: Property or method "title" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

1 Ответ

0 голосов
/ 10 января 2019

Использование v-for

Например 

<template>
    <Page class="page">
        <ActionBar title="Home" class="action-bar" />
        <ScrollView>
            <StackLayout class="home-panel">
                <!--Add your page content here-->
                <Label :text="title" v-for="title in titles" />
            </StackLayout>
        </ScrollView>
    </Page>
</template>

<script>
    export default {
        data() {
            return {
                titles: ["foo", "bar", "test"]
            };
        }
    };
</script>

<style scoped>
    .home-panel {
        vertical-align: center;
        font-size: 20;
        margin: 15;
    }

    .description-label {
        margin-bottom: 15;
    }
</style>

Демонстрация игровой площадки здесь

...