Permalink
Find file Copy path
9eb53f6 Jan 13, 2020
bunny Yay
0 contributors

Users who have contributed to this file

65 lines (60 sloc) 1.59 KB
<!DOCTYPE html>
<html>
<head>
<title>Vue.js! 🚀</title>
</head>
<body>
<!-- HTML -->
<div id="app">
<p v-show="starships.length == 0"> Loading... </p>
<table v-show="starships.length > 0">
<thead>
<th v-on:click="sortByName">Name</th>
<th v-on:click="sortByModel">Model</th>
<th>Cost</th>
</thead>
<tbody>
<tr>
<td> <input type="text" v-model="nameSearch"> </td>
<td> </td>
<td> </td>
</tr>
<tr v-for="starship in filteredStarships">
<td> {{ starship.name }} </td>
<td> {{ starship.model }} </td>
<td> {{ starship.cost_in_credits }} </td>
</tr>
</tbody>
</table>
</div>
<!-- JavaScript -->
<script src="vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
nameSearch: "",
starships: []
},
computed: {
filteredStarships() {
return this.starships.filter(s=> s.name.search(this.nameSearch) != -1)
}
},
methods: {
sortByName() {
this.filteredStarships.sort((a,b)=> a.name > b.name ? 1 : -1)
},
sortByModel() {
this.filteredStarships.sort((a,b)=> a.model > b.model ? 1 : -1)
},
},
created() {
fetch('https://swapi.co/api/starships/')
.then(response => response.json())
.then(data => this.starships = data.results)
}
})
</script>
</body>
</html>