Блог

У меня есть массив объектов в моем экземпляре 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>