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

Posted 2023-02-23

【中文标题】为啥在这种情况下我无法过滤本地 json 文件（vuejs2）

【英文标题】：Why i can't filter local json file in this case (vuejs2)为什么在这种情况下我无法过滤本地 json 文件（vuejs2）

【发布时间】：2019-02-13 18:49:47

【问题描述】：

在我的项目中设置 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>

【问题讨论】：

你在哪里调用setFounded() 方法？

抱歉， 查找！

好的，我发现你的错误，我正在写完整的答案

编辑问题并添加完整代码。感谢您的帮助。

【参考方案1】：

您的问题与 Vue Cli 3.x 无关，您在承诺范围内犯了一些错误，例如 return res.json() 和 this.founded = res.items; 但 res 对象具有以下键：config data headersrequeststatus和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 );

【讨论】：

但我仍然没有显示结果。当我单击查找按钮时，它必须显示结果。但它没有

因为search 和city 是空字符串

我不明白，我现在能做什么？

老兄，我按照你说的做了同样的事情，但我无法达到结果。我认为 v-model 无法正常工作。看这张i.hizliresim.com/r1kaJa.png 图片。你会明白我说的。

我看不到图片，因为它返回 403 禁止