Блог

Я начинаю с VueJS 3 и пытаюсь отобразить список местоположений, хранящихся в базе данных Mongod. Я использую axios для управления запросом.
Ответ хороший, я могу зарегистрировать его в консоли, но я не могу поместить его в компонент Location.
В консоли браузера не отображается никаких ошибок, и компонент не загружается. Когда я отлаживаю и проверяю пойманные исключения в VSCode, у меня возникает ошибка синтаксиса, подобная этой :

 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, но я не могу понять, в чем проблема.
Я тестирую API с помощью Postman, и он работает нормально. Я также тестирую его со статическими данными, и он тоже работает нормально.
Код веб-компонента :

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

И код LocationService, который взаимодействует с API :

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

Я полагаю, что это простая ошибка, но я застрял на ней со вчерашнего дня и не знаю, что делать, у вас есть какие-нибудь идеи? Спасибо

Я думаю, что вы возвращаете объект только с полем, а не со значением. Почему бы не вернуть местоположения.

 return locations;
  

или

 return {
 locations : locations
}