Jobs.vue

<script>
import Logo from '~/components/Logo.vue'
import { Jobs } from '~/utility'
export default {
  components: { Logo },
  data: () => ({
    page: 1,
    jobs: [],
    fullTime: false,
    location: '',
  }),
  async fetch() {
    this.fetchJobs()
  },
  async asyncData({ query }) {
    const searchString = query.search
    return { searchString }
  },
  watch: {
    $route(to, from) {
      this.searchString = to.query.search
      this.fetchJobs()
    },
  },
  methods: {
    async fetchJobs() {
      this.jobs = await fetch(
        `https://github-jobs.glitch.me/positions.json?page=${this.page}${
          this.fullTime ? `&full_time=true` : ``
        }${this.location.length ? `&location=${this.location}` : ``}${
          this.searchString ? `&search=${this.searchString}` : ``
        }`
      )
        .then((res) => res.json())
        .then((data) => data.map((job) => new Jobs(job)))
    },
    handleJobTypeSelected(e, value) {
      this.fullTime = value === 'Full time'
      this.fetchJobs()
    },
    handleLocationSelected(e, value) {
      this.location = value === 'Anywhere' ? '' : value
      this.fetchJobs()
    },
    handleNext() {
      this.page += 1
      this.fetchJobs()
    },
    handlePrevious() {
      if (this.page === 1) return
      this.page -= 1
      this.fetchJobs()
    },
  },
}
</script>