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

Codepen

Answer 1

json.data 是一个对象，不是一个数组，所以你不能对它使用 filter。您需要将该对象转换为数组以对其进行过滤。您可以像 Bert 在他的代码笔中建议的那样做。

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