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

Posted 2023-02-22

【中文标题】Vuejs 搜索栏过滤器不返回结果

【英文标题】：Vuejs searchbar filter returns no result

【发布时间】：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 属性。

【参考方案1】：

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

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