如何使用vue通过标记和城市选项获取JSON文件中的值?

问题描述 投票:-1回答:1

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

1-)我的情况是:当我将必要的信息写入差距时, - 例如一个差距的工作名称和另一个差距的城市名称(如伊斯坦布尔) - 我希望在页面上看到该城市的工作。

2-)另外,当我使用盒子搜索某些东西时,我需要使用大写字母才能看到结果。无论我怎么输入字母,不管资本与否,我都希望看到结果,我怎样才能做到这一点?

谢谢你的帮助。

this is full code

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>

and this is job.json file

javascript vuejs2
1个回答
2
投票

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

computed: {
            filteredFounded: function () {
                return this.founded.filter(items => {
                    return (
                        items.cityName.toLowerCase() === this.city.toLowerCase() && items.positionName.toLowerCase().match(this.search.toLowerCase())
                    );
                });
            }
        }
© www.soinside.com 2019 - 2024. All rights reserved.