[英]Filter Option with select tag Vue/Mongo DB
我的 Vue 實例中有一個對象數組,其中包含來自 MongoDB 服務器的數據,以及一個表示周的數字數組。 數組如下所示:
courses: [
{Course: "A" Week: "1"},
{Course: "B" Week: "1"},
{Course: "A" Week: "2"},
{Course: "B" Week: "2"}
],
weeksInSemester: [1,2,3]
我用 ejs 顯示我的數據,如下所示:
<div v-for="value in courses">
{{ value.Course }}
</div>
到現在為止還挺好。 現在我希望能夠從這樣的標簽中過濾結果:
<select>
<option v-for="weeks in weeksInSemester">
{{ weeks }}
</option>
</select>
我已經工作/環顧了一段時間,但找不到任何解決方案。 什么是最好的方法來做到這一點?
在選擇上使用v-model
:
<select v-model="selected">
創建一個計算以按所選值過濾課程:
computed: {
filteredCourses() {
if (this.selected) {
return this.courses.filter(v => v.Week === this.selected);
}
return this.courses;
}
}
使用computed
與v-for
:
<div v-for="value in filteredCourses">
{{ value.Course }}
</div>
演示:
/***** APP *****/ new Vue({ el: "#app", data() { return { selected: null, courses: [ {Course: "A", Week: "1"}, {Course: "B", Week: "1"}, {Course: "A", Week: "2"}, {Course: "B", Week: "2"} ], weeksInSemester: [1,2,3] } }, computed: { filteredCourses() { if (this.selected) { return this.courses.filter(v => v.Week === this.selected); } return this.courses; } } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div v-for="value in filteredCourses"> {{ value.Course }} </div> <select v-model="selected"> <option value="">All</option> <option v-for="weeks in weeksInSemester"> {{ weeks }} </option> </select> </div>
在評論中編輯您的問題:
要添加“全部”選項,您可以插入一個value
空字符串的靜態選項,該選項不會通過selected
檢查:
<select v-model="selected">
<option value="">All</option>
<option v-for="weeks in weeksInSemester">
{{ weeks }}
</option>
</select>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.