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

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 返回单个项目。

它不在数组中。它是一个物体。没有过滤器。

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