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 不是函数

这是将存储在 result:{} 中的 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>