Today I delved into the world of VUEjs for the first time, experimenting with extracting data from a URL in JSON format. Initially, this process went smoothly, but my curiosity led me to attempt adding a search feature. I followed online tutorials, which unfortunately did not yield the desired results. Upon incorporating a filter() method into my code, the screen went blank. This hiccup has left me at an impasse as I struggle to identify where I might have gone wrong.
For instance, writing "Bitcoin" should ideally return the symbol, name, and price of the cryptocurrency.
<div id="app">
<input type="text" v-model="search" placeholder="search coin">
<ul>
<li v-for="coin in filteredCoins">
{{ coin.symbol }} {{ coin.name }} {{ coin.quotes['USD']['price']}}
</li>
</ul>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const app = new Vue({
el: '#app',
data: {
data: [],
search: ''
},
computed: {
filteredCoins: function() {
return this.data.filter((coin) => {
return coin.title.match(this.search);
});
}
},
created () {
fetch('https://api.coinmarketcap.com/v2/ticker/')
.then(response => response.json())
.then(json => {
this.data = json.data
})
}
})
</script>