Пользовательский фильтр данных API Vue.js не работает - Uncaught SyntaxError: Неожиданный токен: - PullRequest
Новая
       15

Пользовательский фильтр данных API Vue.js не работает - Uncaught SyntaxError: Неожиданный токен:

0 голосов
/ 05 февраля 2019

Я новичок в Vue.js и застрял.Я извлек данные API из заданий Github через Vanilla JavaScript, и теперь я хочу создать пользовательский фильтр.Я начинаю с фильтра для задания «тип», означающего «Полный рабочий день», «Неполный рабочий день» и т. Д. Кроме того, этот код помещается в плагин в WordPress под названием Shortcoder.Я посмотрел учебные пособия и посмотрел на три других сообщения в Stackoverflow, которые похожи, но не могу понять, почему я получаю эту ошибку: «непредвиденный SyntaxError: неожиданный токен: в строке, в которой указано selectedType =« Full Time ». Возможно, я только что посмотрелна это слишком долго и нужны свежие глаза. Я был бы очень признателен, кто-то еще рассматривает его. Заранее спасибо. Вот мой код: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- VUE.JS CDN -->
   <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>  

  <title>Github Jobs API</title>

 <a href="http://href="https://fonts.googleapis.com/css?family=Dosis:400,700" rel="stylesheet""></a>

  <style>
* {
  box-sizing: border-box
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: 'Dosis', sans-serif;
  line-height: 1.6;
  color: #696969;
  background: white;
}

#root {
  max-width: 1200px;
  margin: 0 auto;
}

h1 {
  text-align: center;
  padding: 1.5rem 2.5rem;
  background-color: #b0bac6;
  margin: 0 0 2rem 0;
  font-size: 1.5rem;
  color: #696969;
}

p {
  padding: 0 2.5rem 2.5rem;
  margin: 0;
}

.container1{
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  background: #bobac6;
  box-shadow: 2px 4px 25px rgba(0, 0, 0, .1);
  border-radius: 12px;
  overflow: hidden;
  transition: all .2s linear;
}

.card:hover {
  box-shadow: 2px 8px 45px rgba(0, 0, 0, .15);
  transform: translate3D(0, -2px, 0);
}

@media screen and (min-width: 600px) {
  .card {
    flex: 1 1 calc(50% - 2rem);
  }
}

@media screen and (min-width: 900px) {
  .card {
    flex: 1 1 calc(33% - 2rem);
  }
}

.card:nth-child(2n) h1 {
  background-color: #b0bac6;
  color: #696969;
}

.card:nth-child(4n) h1 {
  background-color: #b0bac6;
  color: #696969;
}

.card:nth-child(5n) h1 {
  background-color #b0bac6;
  color: #696969;
}
.container2 {
    padding: 20px;
    width: 90%;
    max-width: 400px;
    margin: 0 auto;
}

label {
    display: block;
    line-height: 1.5em;
}

ul {
    margin-left: 0;
    padding-left: 0;
    list-style: none;
}

li {
    padding: 8px 16px;
    border-bottom: 1px solid #eee;
}

  </style>

</head>

<body>
 <!-- DIV for Vue.js filter -->

     <div class="container2" id="jobs">
    <div class="filter">
        <label><input type="radio" v-model="selectedType" value="Full Time"/>Full Time</label>
        <label><input type="radio" v-model="selectedType" value="Part Time"/>Part Time</label>

    </div>

    <ul class="job-list">
        <li v-for="job in filteredJobs">{{ job.title }}</li>
    </ul>
</div>

   <!-- DIV FOR API DATA CARD DISPLAY -->
     <div id="root"></div>



      <script>
      // USED STRICT MODE TO SOLVE: “UNCAUGHT SYNTAX ERROR: UNEXPECTED TOKEN 
          U IN JSON @ POSITION 0”

      'use strict';

      // INITIATING APIDATA AS GLOBAL VARIABLE
       var apiData= " ";

       const app = document.getElementById('root');

       const container1 = document.createElement('div');
       container1.setAttribute('class', 'container1');

       app.appendChild(container1);

       var request = new XMLHttpRequest();

       //GET REQUEST WITH USE OF HEROKU AS A PROXY TO SOLVE CORS ERROR
       request.open('GET','https://cors-anywhere.herokuapp.com/https://jobs.github.com/positions.json?&markdown=true&page=1', 
                   true);
       request.onload = function () {

      //CONVERT JSON DATA TO JAVASCRIPT OBJECTS USING JSON.PARSE
      var apiData = JSON.parse(this.response);
      if (request.status >= 200 && request.status < 400) {
      apiData.forEach(job => {
      const card = document.createElement('div');
      card.setAttribute('class', 'card');

      const h1 = document.createElement('h1');
      h1.textContent = job.title;

      const p = document.createElement('p');
      job.description = job.description.substring(0, 300);
      p.textContent = `${job.description}...`;

      container1.appendChild(card);
      card.appendChild(h1);
      card.appendChild(p);
    });

      // ERROR HANDLING
       } else {
       const errorMessage = document.createElement('marquee');
       errorMessage.textContent = `It's not working!`;
      app.appendChild(errorMessage);
     }
   }
      request.send();

   // APPLY FILTER TO API DATA USING VUE.JS
    var vm = new Vue({
    el:  "#jobs",
    data() { 
      return {
          apiData:[],
          search: ' ',
          filterJobs: [ ]},

          selectedType:"Full Time"

           },

        computed: {
        filteredJobs: function() {
            vm = this;
            var category = vm.selectedType;

            if(type === "part time") {
                return vm.jobs;
            } else {
                return vm.jobs.filter(function(job) {
                    return job.type === type;
                });
            }
                   }
                 }
         });
     </script>
   </body>
</html>

1 Ответ

0 голосов
/ 06 февраля 2019

Синтаксические ошибки в data(): 

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

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

Вот исправленный код: 

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>
...