Question

我在将JSON数据从API插入ListView时遇到麻烦。这是链接API：https://webservicevsid.com/API/GetEvent.php

我正在为此项目使用NativeScript-Vue

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

Answer 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

如何将URL的JSON数据插入NativeScript-Vue中的ListView

2 个答案: