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 中的标签设置“跨度”颜色在 FormattedString 中不起作用