adrema/resources/js/views/form/MemberAssign.vue

<template>
    <div>
        <div class="mt-4">
            <f-text id="search_string" v-model="searchString" label="Mitglied finden"></f-text>
        </div>
        <div v-if="results !== null" class="mt-5 sm:mt-10 space-y-2">
            <a v-for="member in results.hits" :key="member.id" href="#" @click.prevent="emit('assign', member.id)">
                <div class="flex items-center justify-between hover:bg-sky-600/20 transition text-sky-300 px-3 sm:px-6 py-1 sm:py-3 rounded-lg">
                    <div class="flex space-x-2 items-center">
                        <div class="w-5 sm:w-16 flex flex-none">
                            <ui-age-groups icon-class="w-4 h-4 sm:w-6 sm:h-6" class="flex-col sm:flex-row" :member="member"></ui-age-groups>
                        </div>
                        <div class="flex items-baseline flex-col md:flex-row">
                            <span class="text-lg" v-text="member.fullname"></span>
                            <span class="ml-2 text-xs" v-text="member.group_name"></span>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>
</template>

<script lang="js" setup>
import { computed, ref } from 'vue';
import useSearch from '../../composables/useSearch.js';
const emit = defineEmits(['assign']);

const { search } = useSearch();

const realSearchString = ref('');
const results = ref(null);

const searchString = computed({
    get: () => realSearchString.value,
    set: async (v) => {
        realSearchString.value = v;

        if (!v.length) {
            results.value = null;
            return;
        }
        results.value = await search(v, [], { limit: 10 });
    },
});
</script>