为什么在这种情况下我不能过滤本地 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>

我忘了添加这段代码。对不起。一切看起来都很好但是。现在无法读取属性 'filter' 的未定义错误提取。

<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 属性这是一个对象数组，所以将 return res.json() 更改为 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 );

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

Why i can't filter local json file in this case (vuejs2)

javascript

json

vue.js

vuejs2

vue-component