API数据不工作的Vue.js用户过滤器 - 未捕获的SyntaxError:意外的标记:

问题描述 投票:0回答:1

我是新来Vue.js,我卡住了。我已经拉在从通过香草的JavaScript Github的工作API的数据,现在我想创建一个用户过滤器。我开始接触作业“式的”,意思是全职,兼职等过滤器此外,该代码在被投入在WordPress插件叫做Shortcoder。我看过的教程,看着相似但想不通为什么我收到此错误#2其他三个帖子:“意外的语法错误:意外的标记:对,指出selectedType =行。”全职”也许我只是盯着。它太久,需要一套新的眼睛,我真的很感激别人审查它在此先感谢这里是我的代码。:

<!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/[email protected]/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>
javascript vue.js vuejs2 api-design
1个回答
0
投票

语法错误是在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/[email protected]/dist/vue.min.js"></script>

<div id="jobs">
  <ul>
    <li v-for="job in filteredJobs" :key="job.id">
      type: {{job.type}}
    </li>
  </ul>
</div>
© www.soinside.com 2019 - 2024. All rights reserved.