时间戳

首页 > 解决方案 > 如何使用 vue 通过标签和城市选项获取 JSON 文件中的值？

javascript - 如何使用 vue 通过标签和城市选项获取 JSON 文件中的值？

问题描述

首先我的英语不好。对于那个很抱歉。

1-）我的情况是：当我将必要的信息写入空白时，例如一个空白的工作名称和另一个空白的城市名称（如伊斯坦布尔）-我想在页面上查看该城市的工作。

2-) 另外，当我使用该框搜索某些内容时，我需要使用大写字母才能看到结果。无论我如何输入字母，无论是否大写，我都想看到结果，我该如何实现？

感谢所有帮助。

这是完整的代码

var app = new Vue({
  el: "#app",
  data: {
    founded: [],
    search: "",
    show: false,
    city: ""
  },
  created() {
    fetch("job.json")
      .then(res => {
        return res.json();
      })
      .then(res => {
        this.founded = res.items;
      });
  },
  computed: {
    filteredFounded: function() {
      return this.founded.filter(items => {
        return (
          items.cityName === this.city && items.positionName.match(this.search)
        );
      });
    }
  }
});

  <div class="header">
        <h4>Get Job</h4>
    </div>



    <div id="app" class="nested">
        <div class="card w-50">
            <div class="search">
                <input type="text" class="job" v-model="search" placeholder="Job..." @keypress.enter="founded">
                <select name="" class="city" id="" v-model="city">
                    <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 @click="show = true">Find!</button>
            </div>

            <div class="card-body" v-show="show" v-for="items in filteredFounded">
                <h5 class="card-title">{{items.companyName}}</h5>
                <p class="card-text">{{items.positionName}}</p>
                <p class="card-text">{{items.cityName}}</p>
                <p class="card-text">{{items.townName}}</p>
                <p class="card-text">{{items.distance}}</p>
                <a href="#" class="btn btn-primary">Go!</a>
            </div>
        </div>
    </div>

这是 job.json 文件

标签： javascriptvuejs2

解决方案

您可以通过首先将所需数据转换为小写或大写字母来实现此目的。您可以使用toLowerCase()或toUpperCase()函数执行此操作，然后比较数据。例如，你可以做这样的事情。

computed: {
            filteredFounded: function () {
                return this.founded.filter(items => {
                    return (
                        items.cityName.toLowerCase() === this.city.toLowerCase() && items.positionName.toLowerCase().match(this.search.toLowerCase())
                    );
                });
            }
        }

推荐阅读