Question

我在通过API获得的JSON文件上实现简单搜索功能时遇到问题。

各个元素都起作用：我能够接收API数据，能够对非API数据以及某些API的API数据进行搜索。

最大的问题是，即使不进行过滤，数据也不会显示，并且我在控制台中遇到的错误指出

this.items.filter不是函数

非常感谢！

<input type="text" v-model="search">
<div v-for="content in filteredItems" :key="content.name">
  <span> {{ content }}</span>
</div>

export default {
  name: "hello",
  data: () => ({
    search: '',
    items: []
  }),

mounted() {
  var self = this;
  axios
    .get("https://jsonplaceholder.typicode.com/posts/1")
    .then(function(response) {
      console.log(response);
      self.items = response.data;
    })
    .catch(function(error) {
      console.log(error);
    });
},
computed: {
  filteredItems: function() {
    let searchTerm = (this.search || "").toLowerCase();
    return this.items.filter(function(item) {
      let title = (item.title || "").toLowerCase();
      return title.indexOf(searchTerm) > -1;
    });
  }
}

例如，如果我将API更改为此，则搜索有效。 https://restcountries.eu/rest/v2/all

Answer 1

https://jsonplaceholder.typicode.com/posts/1返回一个项目。

它不在数组中。这是一个对象。没有filter。

https://restcountries.eu/rest/v2/all返回一个数组。有一个filter。

带过滤器的Vue JS axios请求-this.XX.filter不是函数

1 个答案: