Monaca Onsen UI Discord Chat Github Repo

[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.

    1. v-ons-card not showing anything
    2. 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
      })
    }
    

    }