Closed
Description
I have this variable
data() {
return {
items: [
{
text: 'text 1',
user: {name: 'John', image:'res://user/1.png'}
},
{
text: 'text 2',
user: {name: 'Lucy', image:'res://user/2.png'}
},
{
text: 'text 3',
user: {name: 'Nick', image:'res://user/3.png'}
}
]
}
}
If I loop through it via v-for all is shown correctly
<label v-for="(item, index) in items" :text="item.user.name" ></label>
but if I do it via listview the item.text is shown correctly but item.user.name is undefined..
<list-view :items="items" class="list-group" :template-selector="templateSelector" separator-color="red" @itemTap="onItemTap" @loaded="onLoaded" @load-more-items="onLoadMoreItems">
<template scope="item">
<flexbox-layout class="line">
<label :text="item.text" ></label>
<label :text="item.user.name" ></label>
</flexbox-layout>
</template>
</list-view>`
here is full component source
<template>
<flexbox-layout class="row">
<flexbox-layout class="line">
<label v-for="(item, index) in items" :text="item.user.name" ></label>
</flexbox-layout>
<flexbox-layout class="line">
<list-view :items="items" class="list-group" :template-selector="templateSelector" separator-color="red" @itemTap="onItemTap" @loaded="onLoaded" @load-more-items="onLoadMoreItems">
<template scope="item">
<flexbox-layout class="line">
<label :text="item.text" ></label>
<label :text="item.user.name" ></label>
</flexbox-layout>
</template>
</list-view>
</flexbox-layout>
</flexbox-layout>
</template>
<script>
export default {
data() {
return {
items: [
{
text: 'text 1',
user: {name: 'John', image:'res://user/1.png'}
},
{
text: 'text 2',
user: {name: 'Lucy', image:'res://user/2.png'}
},
{
text: 'text 3',
user: {name: 'Nick', image:'res://user/3.png'}
}
]
}
},
methods: {
templateSelector() {
return 'default'
},
onLoaded(e) {
console.log('The list has been loaded')
},
onLoadMoreItems(e) {
console.log('Loading more items')
},
onItemTap(e) {
console.log('item tapped')
}
}
}
</script>
<style scoped>
</style>