How to filter checkbox names with search bar in Element UI - Vue.js

432 views Asked by At

I have multiple checkboxes bottom of a search button and I want to display a spesific checkbox when user enters its name. For instance:

sample image of search bar and checkbox

As shown in the image, when user enters "Positive", other checkboxes must be hidden and only "Positive" must be shown.

I have tried giving ref to checkboxes and filter input parameter inside of watch method but could not get the result. Here is my relating code:

Search bar:

                <el-input v-model="searchLabelFilters" class="chart-search-tab" placeholder="Search" />

Sample checkbox:

                <el-checkbox
                    ref="checkBoxRef"
                    v-model="checkedCheckBox1"
                    label="Positive"
                    size="large"
                    id="0"
                    @change="filterList('positive')"
                />

Mounted and watch methods:

                  mounted() {
                   this.checkBoxRef = this.$refs.checkBoxRef;
                  },
                  watch: {
                    searchLabelFilters() {
                    this.checkBoxRef.filter(this.searchLabelFilters);
                  },
                  },
0

There are 0 answers