VueJS3:解析JSON问题

Question

我从VueJS 3开始，尝试在MongoDataBase中呈现位置列表。我使用axios来管理请求。

响应很好，我可以将其记录在控制台中，但不能将其放入Location组件中。

浏览器控制台中不会出现任何错误，组件也不会加载。当我在VSCode中调试和检查捕获的异常时，我有一个如下所示的SyntaxError：

Exception has occurred: SyntaxError: Unexpected token    in JSON at position 1
at parse (<anonymous>)
    at has (http://localhost:8080/js/chunk-vendors.js:33332:39)
    at has (http://localhost:8080/js/chunk-vendors.js:33246:48)
    at runInContext (http://localhost:8080/js/chunk-vendors.js:33362:10)
    at Object.<anonymous> (http://localhost:8080/js/chunk-vendors.js:34034:5)
    at Object.<anonymous> (http://localhost:8080/js/chunk-vendors.js:34067:4)
    at Object.58 (http://localhost:8080/js/chunk-vendors.js:34069:4)
    at o (http://localhost:8080/js/chunk-vendors.js:28806:374)
    at http://localhost:8080/js/chunk-vendors.js:28806:425
    at Object.<anonymous> (http://localhost:8080/js/chunk-vendors.js:30565:13)

我想我在解析JSON响应时遇到了问题，但我不知道问题出在哪里。

我用Postman测试了API，它工作得很好。我还用静态数据测试了它，它也工作得很好。

webComponent的代码如下：

<template>
  <div>
    <Location
      v-for="location in locations"
      :key="location.id"
      :locationModel="location"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { LocationModel } from "../models/LocationModel";
import { useLocationService } from "../composables/LocationService";
import Location from "../components/Location.vue";

export default defineComponent({
  name: "LocationList",

  components: {
    Location
  },

  async setup() {
    const location = useLocationService();
    const locations = ref<Array<LocationModel> | null>(null);
    locations.value = await location.list();
    
    return {
      locations
    };
  }
});
</script>

<style></style>

和与API交互的LocationService的代码：

import { LocationModel } from "@/models/LocationModel";
import axios from "axios";

export function useLocationService() {
  return {
    async list(): Promise<Array<LocationModel>> {
      const params = {
        lng: 0.2185714,
        lat: 47.9791214,
        maxDistance: 5000
      };
      const response = await axios.get<Array<LocationModel>>(
        "http://localhost:3000/api/locations",
        { params }
      );
      return Promise.resolve(response.data);
    }
  };
}

我想这是一个简单的错误，但我从昨天开始就被困在它上面了，我不知道该怎么办，你知道吗？谢谢

Answer 1

我认为返回的对象只有一个字段，而不是一个值。为什么不把位置还给我。

return locations;

或

return {
 locations : locations
}