从json对象创建一个搜索栏jsvue

Question

我想创建一个搜索栏，用于搜索json对象的数据并向用户显示数据。我目前的代码看起来像这样，它工作正常。

<html>


<head>
    <script src="https://unpkg.com/vue"></script>
     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head>   <body> <div id='app'>   <input type='text' v-model='keyword' placeholder='search title'>   <button v-on:click="">automotive</button>   <div v-for="post in filteredList"> <iframe width="420" height="315" v-bind:src="post.link">   </iframe>  <a v-bind:href="post.link">{{post.title}}</a>   </div>   </div>
      <script> "use strict";

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Post = function Post(title, link, author, img) {  
_classCallCheck(this, Post);

  this.title = title;   this.link = link;   this.author = author;   this.img = img; }; var app = new Vue({   el: '#app',   data: {
    keyword:'',
    postList: [
      new Post(
        'Vue.js', 
        'https://www.youtube.com/embed/tgbNymZ7vqY', 
        'Chris', 
        'https://vuejs.org//images/logo.png'
      ),
      new Post(
        'React.js', 
        'https://www.youtube.com/embed/k3frK9-OiQ0', 
        'Tim',
        'http://daynin.github.io/clojurescript-presentation/img/react-logo.png'
      ),
      new Post(
        'Angular.js', 
        'https://angularjs.org/', 
        'Sam', 
        'https://angularjs.org/img/ng-logo.png',
      ),
      new Post(
        'Ember.js', 
        'http://emberjs.com/', 
        'Rachel',
        'http://www.gravatar.com/avatar/0cf15665a9146ba852bf042b0652780a?s=200'
      ),
      new Post(
        'Meteor.js', 
        'https://www.meteor.com/', 
        'Chris', 
        'http://hacktivist.in/introduction-to-nodejs-mongodb-meteor/img/meteor.png'
      ),
      new Post(
        'Aurelia', 
        'http://aurelia.io/', 
        'Tim',
        'https://cdn.auth0.com/blog/aurelia-logo.png'
      ),
      new Post(
        'Node.js', 
        'https://nodejs.org/en/', 
        'A. A. Ron',
        'https://code-maven.com/img/node.png'
      ),
      new Post(
        'Pusher', 
        'https://pusher.com/', 
        'Alex', 
        'https://avatars1.githubusercontent.com/u/739550?v=3&s=400'
      ),
      new Post(
        'Feathers.js', 
        'http://feathersjs.com/', 
        'Chuck',
        'https://cdn.worldvectorlogo.com/logos/feathersjs.svg'
      ), ]   },   methods: {
       },   computed:{
    filteredList(){
      return this.postList.filter((post) => {
        return post.title.toLowerCase().includes(this.keyword.toLowerCase());
      });
    }   } })
      </script>   </body>   <html>

忽略链接的内容并不重要。然而，我遇到的问题是通过axios请求从外部源工作。我之前已经完成了axios请求并获得了json数据，但我正在努力使这个搜索功能与它一起工作。以下是破解代码的示例（忽略v-on：单击它尚未设置。忽略没有我可以处理的视频，以后我只需要搜索功能来处理来自的json数据axios request）但我一直得到错误，如'类型错误：this.item未定义'和'对象错误'无论如何继承代码：

<html>


 <head>
    <script src="https://unpkg.com/vue"></script>
     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>
<div id='app'>
  <input type='text' v-model='keyword' placeholder='search item'>
  <button v-on:click="">automotive</button>
  <div v-for="item in filteredList">

<p>{{item.name}}</p>
  </div>
  </div>
      <script>

var app = new Vue({
  el: '#app',
  data: {
    keyword:'',
    itemList: '',

  },
             created: function() {
            this.loaddata();
            },
            methods: {
                loaddata: function(){
                  var vueapp = this;
                    axios.get('https://jsonplaceholder.typicode.com/users').then(function (response){
                        vueapp.itemList = response.data;
                    })
                },
            },

  computed:{
    filteredList(){
      return this.item.filter((item) => {
        return item.name.toLowerCase().includes(this.keyword.toLowerCase());
      });
    }
  }
})
      </script>
  </body>
  <html>