Почему я не могу отфильтровать локальный файл 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 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 );