So far I can get the data in a table when I hard code an artists name. What is my search box to link into the api call, so when I search for an artist, those results show up, when new to Vue. there is 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 there is hard coded the artist ‘Drake” just to experiment, but how can I link it to the input search?
Solution :
It’s pretty easy. Let me describe.
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>–>
Connect the input field with the model with v-model
<input
….
aria-label=”Search”
v-model=”search”
\>
Use the model when the component creates the url as this.search. The data have to be provided reactively.
You may learn more about connection forms and vue’s model in the documentation