Vuejs 搜索栏过滤器不返回结果答案

【问题标题】：Vuejs searchbar filter returns no resultVuejs 搜索栏过滤器不返回结果
【发布时间】：2018-12-10 20:47:28
【问题描述】：

今天我第一次开始玩 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

【问题讨论】：

某事like this。正如@BillCriswell 提到的，您的响应数据不是数组。此外，值上没有 title 属性。

标签： javascript arrays vue.js filter vue-component

【解决方案1】：

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

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

【讨论】：