如何在 NativeScript-Vue 中将 JSON 数据从 URL 插入 ListView答案

【问题标题】：How to insert JSON Data from URL to ListView in NativeScript-Vue如何在 NativeScript-Vue 中将 JSON 数据从 URL 插入 ListView
【发布时间】：2019-04-25 00:38:01
【问题描述】：

我无法将 JSON 数据从 API 插入到 ListView。这是链接 API：https://webservicevsid.com/API/GetEvent.php

我在这个项目中使用 NativeScript-Vue

【问题讨论】：

标签： vue.js nativescript

【解决方案1】：

您需要使用 Ajax、jQuery 或 Axios 之类的工具来获取数据。 Here 是您使用 Axios 寻找的一个示例。基本上，包含一个脚本，其中包含指向可以处理此逻辑的外部文件的链接。

index.html

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

那么，在你看来，包括...

mounted() {
  axios.get("https://webservicevsid.com/API/GetEvent.php")
  .then(response => {this.results = response.data.results})
}

我对 NativeScript 不太熟悉，但 this 可能更符合您的要求...

<script>
  import axios from "axios";
  export default {
  data() {
    return {
      data: []
    };
  },
  mounted() {
    axios({ method: "GET", "url": 
    "https://webservicevsid.com/API/GetEvent.php" }).then(result => {
      this.data = result.data.results;
    }, error => {
      console.error(error);
    });
  }
};
</script>

【讨论】：

【解决方案2】：

您可以使用 axios 或 Http 模块来访问 api 并将响应加载到列表视图中。

<template>
    <Page class="page">
        <ActionBar title="Home" class="action-bar" />
        <ListView for="item in listOfItems" class="list-group">
            <v-template>
                <!-- Shows the list item label in the default color and style. -->
                <Label :text="item.nama_event" class="list-group-item" />
            </v-template>
        </ListView>
    </Page>
</template>

<script>
    const axios = require("axios");

    export default {
        data() {
            return {
                listOfItems: []
            };
        },
        mounted: function() {
            axios
                .get("https://webservicevsid.com/API/GetEvent.php")
                .then(response => {
                    this.listOfItems = response.data;
                });
        }
    };
</script>

Playground Sample

【讨论】：