Блог

У меня есть выпадающий список, в котором есть список категорий. Я хотел бы иметь возможность вводить в раскрывающемся списке и фильтровать мой выпадающий список тем, что я ввел, чтобы пользователю было проще найти категорию, которая им нужна. Я изо всех сил пытаюсь заставить это работать, и я не уверен, как это сделать.

Вот мой код

 <template>
    <transition name="modal-fade">
        <div>
            <div class="modal-backdrop show"></div>
            <div class="modal" style="display: inline;">
                <div class="modal-dialog modal-dialog-scrollable" role="document" style="width: 680px; max-width: 680px;">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">{{product.name}}</h5>
                            <button type="button" class="close" @click="close">
                                <span aria-hidden="true">amp;times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <table class="table table-striped table-sm">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Remove</th>
                                    </tr>
                                </thead>
                                <tbody>
                                <tr v-for="cat in addedCat">
                                    <td>[{{ cat.id }}] {{ cat.name }}</td>
                                    <td><button @click="removeCat(cat)" class="btn btn-sm btn-danger">Remove</button></td>
                                </tr>
                                <tr>
                                    <select class="form-control">
                                        <option value=""><input type="text"></option>
                                        <option v-for="option in options" :value="option.id">{{ option.text }}</option>
                                    </select>
                                </tbody>
                            </table>


                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" @click="close">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
    export default {
        props: ['user', 'products', 'bus'],
        data() {
            return {
                addedCat: [],
                options: []
            }
        },
        mounted() {
            axios.get('/admin/product/' this.product.id '/categories').then((response) => {
                this.addedCat = response.data.categories;
            });

            this.getCategories();
        },
        computed: {

        },
        methods: {
            getCategories(){
                let filCat = this.categories.filter(c => {
                    return this.addedCat.find(ac => ac.id === c.id) == null;
                })

                this.options.push({id: 0, text: "Please select one"});

                filCat.forEach(c => {
                    this.options.push({
                        id: c.id,
                        text: c.name
                    });
                });
            },
        }
    }
</script>
  

Если я правильно понял, вы хотите отфильтровать options список. Привяжите v-model к вашим поисковым данным.

 <input ... v-model='searchFor' />
  

и смотрите это

 methods: {
  search() {
    this.options.filter(category => category.toLowerCase().match('this.searchFor.toLowerCase()'))
  }
}

watch: {
  searchFor() {
     this.search()
  }
}
  

Это будет фильтровать, когда пользователь вводит что-то, но когда пользователь удаляет что-то, что нужно для поиска, вы должны улучшить. Нравится:

 data() {
  return {
    ...
    optionsCopy: [], // Always have first unchanged array
    searchForCopy: '',
  }
}
  

Когда пользователь удаляет что-то в searchFor, вы должны отслеживать это.

 watch: {
  searchFor() {
     if (this.searchFor.length > this.searchForCopy) {
        this.search()
     } else {
        this.options = this.optionsCopy
        this.search()
     }
     this.searchForCopy = this.searchFor
  }
}
  

Если я правильно понимаю вашу проблему. Вы должны решить свою проблему примерно так, как описано выше, с помощью кода.