带有选择标签 Vue/Mongo DB 的过滤器选项

Question

我的 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>

我已经工作/环顾了一段时间，但找不到任何解决方案。 什么是最好的方法来做到这一点？

Answer 1

在选择上使用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>