[vue] v-ons-card and v-ons-list not work I want
-
I want to api data to show on v-ons-card or v-ons-list
but I met problem as below.
- v-ons-card not showing anything
- v-ons-list not scrollable
I use version as
- onsen ui version 2.10.8
- vue version 2.6.10
- vue-onsenui: 2.6.2
ex) v-ons-card - v-ons-card not showing anything.
<template>
<v-ons-page>
<p class=“intro”>
My Home List<br><br>
</p><!-- not show anything -->
<v-ons-card v-for=“photo in photos” :key=“photo.created_at”><div class="title">{{ photo.name }}</div> <div class="content"></div> </v-ons-card>
</v-ons-page>
</template>…
data () {
return {
photos: [],
};
},…
methods: {
getPhotos() { var vm = this; this.$http.get('http://localhost:8000/api/photos/',{ }) .then((response)=>{ //console.log(response.data) vm.photos = response.data }) }
ex) v-ons-list not scrollable
<template>
<v-ons-page>
<p class=“intro”>
My Home List<br><br>
</p><v-ons-list v-for="photo in photos" :key="photo.created_at"> <v-ons-list-header>{{photo.created_at}}</v-ons-list-header> <v-ons-list-item>{{photo.name}}</v-ons-list-item> <v-ons-list-item>{{photo.text_content}}</v-ons-list-item> </v-ons-list>
</v-ons-page>
</template>…
data () {
return {
photos: [],
};
},
methods: {getPhotos() { var vm = this; this.$http.get('http://localhost:8000/api/photos/',{ }) .then((response)=>{ //console.log(response.data) vm.photos = response.data }) }
}