[Vuejs]-Vue.js user filter of API data not working – Uncaught SyntaxError: Unexpected token :

by

0👍

The syntax errors are in data():

data() { 
  return {
    apiData: [],
    search: ' ',
    filterJobs: []},  // <-- FIXME: unexpected '}'

    selectedType: "Full Time"
  // <-- FIXME: missing '}' for the return statement
},
computed: {
  ...

Here’s the code corrected:

data() { 
  return {
    apiData: [],
    search: ' ',
    filterJobs: [], // <-- fixed

    selectedType: "Full Time"
  } // <-- fixed
},
computed: {
  ...

var vm = new Vue({
  el: "#jobs",
  data() {
    return {
      apiData: [],
      search: " ",
      jobs: [],
      selectedType: "full time"
    };
  },
  computed: {
    filteredJobs: function() {
      vm = this;
      var type = vm.selectedType;

      if (type === "part time") {
        return vm.jobs;
      } else {
        return vm.jobs.filter(function(job) {
          return job.type === type;
        });
      }
    }
  },
  mounted() {
    this.jobs = [
      {id: 1, type: 'part time'},
      {id: 2, type: 'full time'},
      {id: 3, type: 'part time'},
      {id: 4, type: 'full time'},
      {id: 5, type: 'part time'},
    ]
  }
});
<script src="https://unpkg.com/vue@2.6.1/dist/vue.min.js"></script>

<div id="jobs">
  <ul>
    <li v-for="job in filteredJobs" :key="job.id">
      type: {{job.type}}
    </li>
  </ul>
</div>

Leave a comment