How to display API data using Nativescript Vue and Axios

Question

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);

Rifki Carlos Rinaldi · Accepted Answer · 2018-04-14 05:22:27Z

1

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 {
…
…

answered Apr 14, 2018 at 5:22

Rifki Carlos Rinaldi

473 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to display API data using Nativescript Vue and Axios

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related