I'm using nativescript vue
and I'm wondering how to do a for loop.. The code I have right now is:
<template>
<GridLayout columns="0" rows="*,*,*">
<Label :text="title" for="title in titles"/>
</GridLayout>
</template>
<script>
export default {
data() {
return {
titles: ['foo', 'bar', 'test']
}
}
}
</script>
The error I receive is: [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://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
Use v-for
For example
<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>