Vuejs 搜索栏过滤器不返回任何结果

Question

今天我第一次开始使用VUEjs，所以我尝试使用JSON从URL中获取数据。这工作得很好，但我想要通过添加搜索栏来获得更多。我在网上看过一些教程，我和他们做了同样的事情，但对我来说效果不是很好。将 filter(( 添加到我的代码后，我在屏幕上看不到任何内容。我现在被困住了，不知道我在代码中做错了什么。

如果我写例如"比特币"，我想拿回符号、名称和价格。

<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>

代码笔

Answer 1

json.data是一个对象，而不是一个数组，所以你不能在它上面使用filter。您需要将该对象转换为数组才能对其进行过滤。你可以做一些像伯特在他的代码笔中建议的事情。

computed: {
filteredCoins () {
return Object.values(this.data).filter(coin => coin.name.toLowerCase().match(this.search.toLowerCase()))
},
},