Filter table with Vue-multiselect

Question

I am using Vue-multiselect to filter a calendar using Vue-cal and am having trouble filtering a table with this selector. I believe the problem is to filter the table with an array of data, for example: filter the table by the name of two teachers. What I have: When some teacher is selected, I have it here:

[{teacher: "Ana"}, {teacher: "Danielly}]

And I try to filter like this:

filteredEvent() {
     return this.events.filter(events => {
        return events.teacher.toLowerCase().
        indexOf(this.value.forEach(el => el.teacher.toLowerCase() > -1))
    })
}

The calendar event slot looks like this:

<template slot="event-renderer" v-for="events in filteredEvent" slot-scope="{event, view}">
<div class="wrapper">
    <div class="event-content" :style="{border: event.border,}">
        <div class="vuecal__event-title">
            <div class="level-color" :style="{background: event.color}"></div>
            <m-avt-level pClass="table__avt-icon" class="centered-icon" :level="event.level" />
            <p class="title">{{event.level}}</p>
        </div>
        <div class="vuecal__event-time mt-2">
            {{event.time}}
        </div>
        <div class="vuecal__event-bar mt-1 mb-2">
            <b-container>
                <m-progress-bar :animated="                 
           :occupedVacancys=" parseInt(event.occupedVacancys) "                                          
           :maxVacancys="parseInt(event.maxVacancys) "/>
          </b-container>
        </div>
    </div>
</div>

This is the select:

   <multiselect
       v-model="value"
       :options="options"
       :multiple="true"
       :close-on-select="false"
       track-by="teacher"
       :custom-label="customLabel">
            <span class="checkbox-label" slot="option" slot-scope="scope" @click.self="select(scope.option)">
            <input type="checkbox" v-model="scope.option.selected" @focus.prevent/>
                {{ scope.option.teacher }}
            </span>
            <span slot="placeholder" slot-scope="scope">
            <svgicon icon="icn_teacher" class="filter-icon" width="18" height="auto" color="#959BA6" />
                Todos os professores
            </span>
</multiselect>

And the object this.Events:

border: "2px solid #3057a5"
class: "ap3"
classDay: 2
classId: ""
color: "#3057a5"
end: "2019-05-29"
level: "Aperfeiçoamento 3"
levelId: 8
maxVacancys: 1
occupedVacancys: 0
start: "2019-05-29"
teacher: "Danielle Kelley"
time: "00:00 - 01:05"
title: ""

Answer 1

If your Select arrow the this.value with an array of values that corresponds to the key value teacher of the event array, so this computed can be done like this:

filteredEvent() {
  return this.events.filter(({teacher}) => this.value.includes(teacher));
}

If this.value for an array of objects such as [{teacher: "Ana"}, {teacher: "Danielly"}] then you can use the .find() to find that value so:

filteredEvent() {
  return this.events.filter(({teacher}) => this.value.find(obj => obj.teacher === teacher));
}

Note: I avoid using value as key in the data of an instance. Because it is not very descriptive in most cases, and because Vue internally uses value in the logic/magic of v-model.