如何解决 filtered API 结果导致 Vue app 返回 undefined？

Question

作为新手，我正在努力了解 Vue，但我在 Github 工作 api 应用程序的功能方面遇到了困难。可以在此处查看完整项目 https://codesandbox.io/s/modest-banach-u6fzg

我在筛选 api 结果时遇到问题，尤其是“加载更多”按钮，理想情况下，该按钮会将 api 的结果筛选为 10 个批次。问题是：

加载更多功能最初可以使用，但是一旦应用程序显示了 30 个结果，顶部的搜索功能就不起作用了。
搜索功能适用于显示 10 个结果的页面的初始呈现，但“加载更多”button/function 不适用于返回的结果。例如，如果您在 location 中搜索“UK”，您会得到最初的 10 个结果，但是 console.log 显示 api 返回了 50 个结果，这些结果未定义，所以不是显示。我不确定这两个问题是否与一个问题有关。

非常感谢任何建议，以及任何关于我如何实施该应用程序的反馈。

谢谢！麦克

Answer 1

您需要使用计算道具而不是函数，如果 jobs 再次加载，您还应该重置加载项计数器。参见 modified code

<template>
  <div v-if="jobs.length">
    <div v-for="job in filterJobs" v-bind:key="job.id">
      <!-- <div v-for="job in jobs" v-bind:key="job.id"> -->
      <Job v-bind:job="job" />
    </div>
    <button v-on:click="loadMore">Load More</button>
  </div>
</template>

<script>
import Job from "./Job";
export default {
  name: "Jobs",
  components: {
    Job,
  },
  data() {
    return {
      jobCount: 10,
    };
  },
  props: ["jobs"],
  watch: {
    // watcher to reset a counter
    jobs(newValue, oldValue) {
      this.jobCount = 10;
    },
  },
  computed: {
    // computed prop instead of function, that way it would be reactive
    filterJobs() {
      return this.jobs.slice(0, this.jobCount);
    },
  },
  methods: {
    loadMore() {
      // we need to check if we are exceeding a length of jobs array or not
      if (this.jobCount + 10 <= this.jobs.length) {
        this.jobCount += 10;
      } else {
        this.jobCount = this.jobs.length;
      }
    },
  },
};
</script>

<style lang="stylus" scoped></style>

如何解决 filtered API 结果导致 Vue app 返回 undefined？

How to solve filtered API results in Vue app returning undefined?

api

vue.js

vue-cli