TypeError：this.results.filter不是搜索框Vuejs中的函数

Question

我一直在努力在VueJS 2.0中实现搜索功能。

我正在尝试复制在Stackoverflow中获得的代码，但无法实现。

我不知道我在哪里弄错了。

结果是一个存储json数据的对象。

    <template>
  <section>
    <b-form-input v-model="searchQuery" placeholder="Search user by full name"></b-form-input>
    <div v-for="result in filteredResources" :key="result.id">
      <td>{{result.LONG_D}}</td>
    </div>
  </section>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      searchQuery: "",
      results: {},
      search: ""
    };
  },
  mounted() {
    this.getDiseases();
  },
  methods: {
    getDiseases: function() {
      axios
        .get("http://localhost:9000/api/diseases/")
        .then(response => (this.results = response.data))
        .catch(error => console.log(error));
    }
  },
  computed: {
    /* Search Bar */
    filteredResources() {
      if (this.searchQuery) {
        return this.results.filter((item) => {
          return item.title.startsWith(this.searchQuery);
        });
      } else {
        return this.results;
      }
    }
  }
};
</script>

这是错误

  

TypeError：this.results.filter不是函数

这是将存储在结果{} 中的json

Answer 1

我建议您直接从AJAX响应中使用results数组。

例如

data: () => ({
  searchQuery: '',
  results: []
}),
async created () {
  let { data } = await axios.get("http://localhost:9000/api/diseases/")
  this.results = data.results
},
computed: {
  filteredResources() {
    let normalizedQuery = this.searchQuery.trim().toLowerCase()
    if (normalizedQuery.length) {
      return this.results.filter(({ LONG_D }) => 
          LONG_D.toLowerCase().startsWith(normalizedQuery))
    }
    return this.results
  }
}

您还应该修复模板

<div v-for="result in filteredResources">
  <p>{{result.LONG_D}}</p>
</div>