How to incorporate a search query box into api call in Vue.js

Question

So far I can get the data in a table when I hard code an artists name. What I want is my search box to link into the api call, so when I search for an artist, those results show up, I am new to Vue. I have created so far, I think the api call would need to be something like:

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>

As you can see I have hard coded the artist 'Drake" just to experiment, but how can I link it to the input search?

Answer 1

It's pretty easy. Let me describe.

1. Disable the form. button inside the form causes page reloading but you don't need it.

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

2. Connect the input field with your model with v-model

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

3. Use the model when the component creates the url as this.search . The data have to be provided reactively.

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

You may learn more about connection forms and vue's model in the documentation