为什么在这种情况下我不能过滤本地json文件(vuejs2)

Question

​

在我的项目中设置vue cli-3之前，过滤器可以工作。在我设置好它之后，我无法达到任何结果。我做错了什么？控制台中没有任何错误。我来分享下面的代码。

提前谢谢。

<template>

  <div id="preview" class="nested">
       <div class="card-body"  v-for="item in items" :key="item.id">
            <h5 class="card-title">{{item.companyName}}</h5>
            <p class="card-text">{{item.positionName}}</p>
            <p class="card-text">{{item.cityName}}</p>
            <p class="card-text">{{item.townName}}</p>
            <p class="card-text">{{item.distance}}</p>
            <a href="#" class="btn btn-primary">Go!</a>
        </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      filteredFounded: [],
      founded: [],
      items: [],
      search: "",
      show: false,
      city: ""
    };
  },

 created() {
    this.$http
      .get("http://www.json-generator.com/api/json/get/cguWKZoQMO?indent=2")
      .then(res => {
        return res.json();
      })
      .then(res => {
        this.founded = res.items;
      });
  },
  methods: {
    setFounded() {
      this.filteredFounded = this.founded.filter(items => {
        return (
          items.cityName.toLowerCase() === this.city.toLowerCase() &&
          items.positionName.toLowerCase().match(this.search.toLowerCase())
        );
      });
    }
  }
};
</script>

我忘了加这个代码了。抱歉的。一切看起来都很好但是。现在无法读取未定义错误获取的属性“筛选器”。

<template>
<div id="app" class="nested">
    <div class="card w-50">
        <div class="search">
            <input type="text" class="job" v-model="search" placeholder="Job...">
            <select name="" class="city" id="">
                <option value="Seçiniz">Seçiniz</option>
                <option value="İstanbul">İstanbul</option>
                <option value="Ankara">Ankara</option>
                <option value="İzmir">İzmir</option>
                <option value="Çanakkale">Çanakkale</option>
            </select>
        </div>

        <div class="find">
            <button v:on-click="setFounded">Find!</button>
        </div>           
    </div>
</div>

​

Answer 1

您的问题与Vue Cli 3.x无关，您在承诺范围(如return res.json()和this.founded = res.items; )中做了一些错误，但是res对象有以下键:config、data、headers、request、status和statusText。

在这种情况下，我们只需要一个对象(项)数组的data属性，因此需要将 this.founded = res.items; 更改为 return res.data ，而this.founded = res.items;更改为 this.founded = res.data;。

将v-model="city"添加到select中，如<select name="" class="city" id="" v-model="city">所示，您已经错误地编写了v:on-click，将其更改为@click

最后将return ( items.cityName.toLowerCase() === this.city.toLowerCase() && items.positionName.toLowerCase().match(this.search.toLowerCase()) ); 更改为 return ( items.cityName === this.city && items.positionName===this.search );