首先我的英语不好。对于那个很抱歉。
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>
您可以通过首先将所需数据转换为小写或大写字母来实现此目的。您可以使用toLowerCase()或toUpperCase()函数执行此操作,然后比较数据。例如,你可以做这样的事情。
computed: {
filteredFounded: function () {
return this.founded.filter(items => {
return (
items.cityName.toLowerCase() === this.city.toLowerCase() && items.positionName.toLowerCase().match(this.search.toLowerCase())
);
});
}
}