时间戳

首页 > 解决方案 > 为什么在这种情况下我无法过滤本地 json 文件（vuejs2）

javascript - 为什么在这种情况下我无法过滤本地 json 文件（vuejs2）

问题描述

它看起来像这样。 在我的项目中设置 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>

标签： javascriptjsonvue.jsvuejs2vue-component

解决方案

您的问题与 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 );

推荐阅读