Question

我正在尝试将API连接到我的Vue应用程序，但似乎无法使其正常工作。

正在检查开发人员工具，看来该应用仅使用“ https://api.scryfall.com/cards/search?q=”发出请求！并且不包括字符串的串联部分。

有什么想法吗？ URL末尾应包含某种卡名。

App.vue

<template>
  <div id="app">
    <deckBuilder @addCard="addCard" @clearDeck="clearDeck" @requestData="requestData"
      :title="title" :card="card" :deck="deck" :received="received" />
  </div>
</template>

<script>
import deckBuilder from './components/deckBuilder';
import axios from 'axios';

const apiLink = "https://api.scryfall.com/cards/search?q=!";

export default {
  name: 'app',
  components: {
    deckBuilder,
  },
  data: () => ({
    title: 'MTG Deck Builder',
    card: '',
    deck:[],
    received: {},
    errors: {},
    url: apiLink + this.card,
  }),
  methods: {
    addCard: function(cardName) {
      this.deck.push(cardName);
      this.card = '';
    },
    clearDeck: function(deck) {
      this.deck = [];
    },
    requestData: function() {
      console.log("Fetching Data from " + this.url)
      return (axios.get('')
      .then(response => {
        this.received = response.data;
        return this.received;
      }))


/*      .catch(err => {
        this.errors = err.response.data;
        console.log("Error!");
        console.log(errors);
      }));
*/

    },
  },
}
</script>

<style>

</style>

deckBuilder.vue

<template>
  <div>
    <h1>{{ title }}</h1>
    <input @keyup.enter="addCard" v-model="card" placeholder="Type a Card Name" />
    <button @click="addCard">Add!</button>
    <button @click="clearDeck">Clear Deck</button>
    <button @click="requestData">Request</button>
    <br>
    <h2>Deck: {{ deck.length }} Cards</h2>
    <ul>
      <li v-for="item in deck">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'deckBuilder',
  props: ['title', 'card', 'deck', 'errors', 'received',],
  methods: {
    addCard() {
      this.$emit('addCard', this.card);
    },
    clearDeck() {
      this.$emit('clearDeck', this.deck);
    },
    requestData(){
      this.$emit('requestData', this.card);
    },
  },
}
</script>

<style scoped>

</style>

Answer 1

根据您的演示代码，

cardName

我想您会感到困惑，deck 是由事件而不是 card 插入到 this.card 中的，并且您使用 addCard 设置了一个空字符串，这意味着该卡在下一行是空的，因此一旦您应用 url: apiLink + this.deck[0],，您将无法获得任何字符串。

请尽量用url: apiLink + this.card,代替{{1}}

连接vue API URL

1 个答案: