How to display API data using Nativescript Vue and Axios

0
votes

This code bellow works in web browser, i can retrieve the json data with v-for :

export default {
  data() {
    return {
      orders: []
    }
  },


  created() {
    axios.get('https://development.octavs.com/testapi.json')
    .then(response => {
         this.orders = response.data
    })
    .catch(error => {
      console.log(error);
    })
    }
}

So i am trying that in nativescript vue with ListView like this :

<ListView class="list-group" for="order in orders" @itemTap="onItemTap" style="height:1250px">
          <v-template>
            <FlexboxLayout flexDirection="row" class="list-group-item">
              <Label :text="order.store" class="list-group-item-heading" style="width: 40%" />
             
              <Label :text="order.description" class="list-group-item-heading" style="width: 60%" />
            </FlexboxLayout>
          </v-template>
        </ListView>

But it doesn't retrieve the data at all nor error message.

Is there anything that i should add ?

i am using nativescipt-vue cli template with router , so i already insert these dependencies :

import axios from 'axios';

import VueAxios from 'vue-axios';

Vue.use(VueRouter, VueAxios, axios);

1
vue.jsnativescriptaxios

1 Answers

1
votes

it turns out i just need to put : import axios from ‘axios’; in the actual page/component

<script>
import axios from 'axios';

  export default {
    data () {
      return {
…
…