Question

我有以下代码可以完美运行......

<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>automotive</button>
  <div v-for="item in filteredItemList">

<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:{
    filteredItemList(){
      return this.itemList.filter((item) => {
        return item.name.toLowerCase().includes(this.keyword.toLowerCase());
      });
    }
  }
})
      </script>
  </body>
</html>

但是，当我更改URL以获取实际数据时，我收到以下错误：

＆＃39; vue.js：597 [Vue警告]：渲染错误：＆＃34; TypeError：this.itemList.filter不是函数＆＃34; （在Root中找到）＆＃39;

我不明白为什么会这样做。如果有人对此有任何想法以及如何帮助我真的，真的，非常感谢它！ :)

以下是我试图进入testjson.php的json：

[{"id":"1658","itemId":"60255","name":"EasterEggCrack","name_short":"Easter Eggs","image":"1","vid":"1","duration":"6","designer":"Scott","Automotive":"0","Backgrounds":"0","Church":"0","Community":"1","Money":"0","Food":"0","Gaming":"0","Healthcare":"0","Holidays":"1","Sports":"0","Patriotic":"0","Retail":"0","Education":"0","Misc":"0","terms":"easter, chick, chicken, decorations, happy, egg, crack, split, spring, allergies, holiday, community, pastel, ","dateAdded":"2018-03-20"},{"id":"1657","itemId":"64748","name":"StPattysDay","name_short":"Patrick's Day","image":"1","vid":"1","duration":"10","designer":"Scott","Automotive":"0","Backgrounds":"0","Church":"0","Community":"0","Money":"0","Food":"0","Gaming":"0","Healthcare":"0","Holidays":"1","Sports":"0","Patriotic":"0","Retail":"0","Education":"0","Misc":"0","terms":"st patricks day, gold, pot, pot of gold, green, clover, leprechaun, hat, shine, holiday","dateAdded":"2018-03-07"}]

这是一份无效的网页副本：

<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>automotive</button>
  <div v-for="item in filteredItemList">

<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('testjson.php').then(function (response){
                        vueapp.itemList = response.data;
                    })
                },
            },

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

axios vuejs类型错误获取json数据

0 个答案: