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 | 1x 1x | <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> |