Как записать мои вызовы API для стиля MVC в vuejs - PullRequest
Новая
       11

Как записать мои вызовы API для стиля MVC в vuejs

0 голосов
/ 08 марта 2020

У меня есть addTracks.vue -компонент, который ищет песню по имени и возвращает результаты из iTunes API. Я написал вызов API в компоненте addTracks.vue, но хочу написать его в компоненте ApiPlaylist.js, чтобы создать стиль MVC и вызвать его в addTracks.vue

addTracks.vue, содержащем вызов API в методах (ПРИМЕЧАНИЕ: все работает с этим кодом): 

<template>
  <div id="app">
    <b-field>
      <b-input placeholder="Enter a track name" v-model="term"> </b-input>
      <b-button type="search" v-on:click="search" class="button is-primary"
        >Search</b-button
      >
    </b-field>
    <div v-for="result in results" :key="result.trackId" class="result">
      <img :src="result.artworkUrl100" />
      <b>Track:</b> {{ result.trackName }}<br />
      <br clear="left" />
      <b-button
        @click="$emit('addTrack', result)"
        size="is-small"
        icon-left="plus-circle"
      >
        Add to playlist
      </b-button>
    </div>

    <div v-if="noResults">
      Sorry, but no results were found. I blame Apple.
    </div>

    <div v-if="searching">
      <i>Searching...</i>
    </div>
  </div>
</template>

<script>
//import * as apiPlaylist from "../api/apiPlaylist";
export default {
  props: ["addTrack"],
  data: () => ({
    term: "",
    results: [],
    noResults: false,
    searching: false,
    trackName: "",
    tracksList: []
  }),
  methods: {
    search() {
      this.results = [];
      this.searching = true;
      fetch(
        `http://ubeat.herokuapp.com/unsecure/search/tracks?q=${encodeURIComponent(
          this.term
        )}&limit=10&media=music`
      )
        .then(res => res.json())
        .then(res => {
          this.searching = false;
          this.results = res.results;
          this.noResults = this.results.length === 0;
        });
    }
  }
};
</script>

Запрос get в ApiPlaylist.js, который вызывается в addTracks.vue: 

export const search = term => {
  return fetch(
    `${url}/search/tracks?q=${encodeURIComponent(term)}&limit=10&media=music`,
    {
      method: "GET"
    }
  )
    .then(response => {
      return response.json();
    })
    .catch(() => {
      console.error("fetch for songs failed");
    });
};

Вызов API в addTracks.vue -компоненте, который не работает: 

search(term) {
  this.results = [];
  this.earching = true;
  apiPlaylist.search(term).then(tracks => {
    this.searching = false;
    this.results = tracks.results;
    this.noResults = this.results.length === 0;
  });
}

Вот ошибка, которую я получаю:

core-js / modules / es6.regexp.search в ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/* . 1030 *js 1031 * ?? исх -!. 0-0 ./ node_modules / vue -loader / Lib ?? vue -loader-опции ./ SRC / компоненты / addTracks vue ? vue & type = script & lang = js &

1 Ответ

0 голосов
/ 08 марта 2020

Сделайте что-то вроде этого: 

// in ./src/api/ApiPlaylist.js
export default {
  search(term) {
    return fetch(...).then(...);
  },
};

Затем импортируйте ваш помощник в ваш компонент: 

// in ./src/components/AddTracks.vue
import ApiPlaylist from '../api/ApiPlaylist';

export default {
  data() {
    return {
      results: [],
    };
  },
  methods: {
    search(term) {
      ApiPlaylist.search(term).then((data) => {
        this.results = data.results;
      });
    },
  },
};
...