如何使用 Nativescript Vue 和 Axios 显示 API 数据

Posted 2023-02-22

【中文标题】如何使用 Nativescript Vue 和 Axios 显示 API 数据

【英文标题】：How to display API data using Nativescript Vue and Axios

【发布时间】：2018-09-20 00:01:54

【问题描述】：

下面的代码在网络浏览器中工作，我可以用 v-for 检索 json 数据：

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

所以我在 nativescript vue 中尝试这样的 ListView ：

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

但它根本不检索数据，也没有错误消息。

有什么需要补充的吗？

我正在使用带有路由器的 nativescipt-vue cli 模板，所以我已经插入了这些依赖项：

从'axios'导入axios；

从'vue-axios'导入VueAxios；

Vue.use(VueRouter, VueAxios, axios);

【参考方案1】：

原来我只需要输入： import axios from ‘axios’;在实际页面/组件中

<script>
import axios from 'axios';

  export default 
    data () 
      return 
…
…