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>

docs

Answer 1

json.data是一个对象，而不是数组，因此不能在其上使用filter。您需要将该对象转换为数组以对其进行过滤。您可以执行Bert在其Codepen中建议的操作。

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

Vue.js搜索栏过滤器未返回任何结果

1 个答案: