Как включить окно поискового запроса в вызов API в Vue.js

Question

Пока что я могу получить данные в таблице, когда жестко закодирую имя артиста.Я хочу, чтобы окно поиска связывало меня с вызовом API, поэтому, когда я ищу исполнителя, появляются эти результаты, я новичок в Vue.Я создал до сих пор, я думаю, что вызов API должен выглядеть примерно так:

https://itunes.apple.com/search?term=${this.search}&entity=album

<template>
  <div class="jumbotron">
    <h1 class="display-4">{{title}}</h1>
    <p class="lead">{{intro}}</p>
    <hr class="my-4">
    <form class="col-lg-6 col-sm-12 mr-auto ml-auto">
      <input
        class="form-control form-control-lg mb-3"
        type="search"
        placeholder="Search"
        aria-label="Search"
      >
      <table class="table table-sm table-light table-bordered" v-if="result.length">
        <thead class="thead-dark">
          <tr class="col-8">
            <th scope="col">Name</th>
            <th scope="col">Artist</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(result, index) in result" :key="index">
            <td>{{result.collectionName}}</td>
            <td>{{result.artistName}}</td>
          </tr>
        </tbody>
      </table>
      <button
        class="btn btn-success btn-lg btn-block mb-3"
        type="submit"
        v-on:click="getData"
        v-if="result.length < 1"
      >Get data</button>
    </form>
  </div>
</template>

<script>
export default {
  name: "Hero",
  props: {
    navLink: String
  },
  data: function() {
    return {
      title: "Simple Search",
      intro: "This is a simple hero unit, a simple jumbotron-style.",
      subintro:
        "It uses utility classes for typography and spacing to space content out.",
      result: [],
      search: ""
    };
  },

  watch: {
    search: function(val) {
      if (!val) {
        this.result = [];
      }
    }
  },

  methods: {
    getData: function() {
      fetch(
        "https://cors-anywhere.herokuapp.com/https://itunes.apple.com/search?term=drake&entity=album"
      )
        .then(response => response.json())
        .then(data => {
          this.result = data.results;
          console.log(data);
        });
    }
  }
};
</script>

<style>
.jumbotron {
  margin-bottom: 0rem !important;
}

.table {
  width: 100% !important;
}
</style>

Как вы можете видеть, я жестко закодировал художника Drake простоэкспериментировать, но как я могу связать его с поиском ввода?

Answer 1

Это довольно легко.Позвольте мне описать.

1. Отключить форму.button внутри form вызывает перезагрузку страницы, но вам это не нужно.

<!--<form class="col-lg-6 col-sm-12 mr-auto ml-auto">-->
    ... some useful code inside ...
<!--</form>-->

Соедините поле ввода с вашей моделью с помощью v-model

<input
    ....
    aria-label="Search"
    v-model="search"
>

Используйте модель, когда компонент создает URL-адрес как this.search.Данные должны предоставляться в реактивном режиме.

fetch(
  `https://cors-anywhere.herokuapp.com/https://itunes.apple.com/search?term=${this.search}&entity=album`
)

Подробнее о формах подключения и модели vue можно узнать в документации