Question

首先，我的英语不好。抱歉。

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>

and this is job.json file

Answer 1

您可以通过首先将所需数据转换为小写或大写字母来实现。您可以使用 toLowerCase（）或 toUpperCase（）函数执行此操作，然后比较数据。例如，您可以执行以下操作。

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

如何使用Vue通过标签和城市选项在JSON文件中获取值？

1 个答案: