如何绑定表示为url的api数据？

Question

http://www.dnd5eapi.co/api/spells/

{
"count": 319,
"results": [
            {
              "name": "Acid Arrow",
              "url": "http://www.dnd5eapi.co/api/spells/1"
            },

“ url”：“ http://www.dnd5eapi.co/api/spells/1”

{
"_id": "5bce91f95b7768e7920184d6",
"index": 1,
"name": "Acid Arrow",
"desc": [
"A shimmering green arrow streaks toward a target within range and bursts in a spray of acid. Make a ranged spell attack against the target. On a hit, the target takes 4d4 acid damage immediately and 2d4 acid damage at the end of its next turn. On a miss, the arrow splashes the target with acid for half as much of the initial damage and no damage at the end of its next turn."
],
"higher_level": [
"When you cast this spell using a spell slot of 3rd level or higher, the damage (both initial and later) increases by 1d4 for each slot level above 2nd."
],
"page": "phb 259",
"range": "90 feet",

const axios = require("axios");
    const url =
      "https://cors-anywhere.herokuapp.com/http://dnd5eapi.co/api/spells";

    axios
      .get(url)
        // .then(response => console.log(response.data.results))
      .then(res => {
        this.classes = res.data.results;
      })
      .catch(error => console.log(error));

<v-card v-for="spells in classes">
      <v-card-title>{{ spells.name }}</v-card-title>
      <p>{{ spells.url }}</p>
</v-card>

我正在使用Vue进行测试，但这是我遇到问题的基本想法。我感到困惑的问题是我试图绑定“ URL”中的数据以显示URL中的其他数据。我将如何到达“ url”端点并显示数据？