nativescript vue for 在标签上循环

Posted

技术标签:

【中文标题】nativescript vue for 在标签上循环【英文标题】:nativescript vue for loop on label 【发布时间】:2019-06-05 11:27:33 【问题描述】:

我正在使用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】:

使用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>

Playground demo here

【讨论】:

以上是关于nativescript vue for 在标签上循环的主要内容,如果未能解决你的问题,请参考以下文章

Nativescript-Vue:如何在 ListView 中正确使用 v-for

Nativescript-vue 在点击事件时显示图像

以编程方式为 NativeScript Vue 中的标签设置“跨度”颜色在 FormattedString 中不起作用

如何使 ScrollView 子项适合 Nativescript-Vue 中 ScrollView 的大小?

nativescript 传递道具 vue

Nativescript-vue:如何构建聊天模板