Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | 2x 2x | <template> <div class="d-flex justify-content-end align-items-center"> <div class="input-group" style="max-width: 200px; margin-bottom: 2rem;" > <input type="text" class="form-control rounded-pill" placeholder="Filter tabs..." aria-label="Search" aria-describedby="button-addon2" @input="handleInputChange" > </div> </div> </template> <script setup> import { ref } from 'vue'; const filteredTabs = ref([]); const emits = defineEmits(['filteredTabs']); const props = defineProps({ tabs: { type: Array, default: null, }, }); const handleInputChange = (event) => { const searchTerm = event.target.value.toLowerCase(); filteredTabs.value = props.tabs.filter(tab => tab.name.toLowerCase().includes(searchTerm)); emits('filteredTabs', filteredTabs.value); } </script> |