How do I create a reusable component based on a static component using Vue 3-CodePudding

I have recently started with Vue 3 and Headless UI.

I have created a ListBox component which is used in App.vue to show a list of People and is working as intended.
I am looking to turn it into a reusable component for showing lists of both People and Countries.

How can I change my component to be dynamic for both types?

ListBox.vue

<template>

    <Listbox v-model="selectedPerson">

        <ListboxButton >
            {{ selectedPerson.name }}
        </ListboxButton>

        <ListboxOptions >

            <ListboxOption
                as="template" v-slot="{ active }"
                v-for="person in people" :key="person"
                :value="person">
                <li :>
                    {{ person.name }}
                </li>
            </ListboxOption>

        </ListboxOptions>

    </Listbox>

</template>

<script setup>
    import { ref } from 'vue'
    import {
        Listbox,
        ListboxLabel,
        ListboxButton,
        ListboxOptions,
        ListboxOption,
    } from '@headlessui/vue'

    const people = [
        { id: 1, name: 'Durward Reynolds' },
        { id: 2, name: 'Kenton Towne' },
        { id: 3, name: 'Therese Wunsch' },
        { id: 4, name: 'Benedict Kessler' },
        { id: 5, name: 'Katelyn Rohan' },
    ]
    const selectedPerson = ref(people[0])
</script>

App.vue:

<template>
    <ListBox />
</template>

CodePudding user response：

You would need to accept both the list of items to show and the currently selected item or list index as props on the component.
The below is an example, coded on-the-fly and not tested, but should give you a clear idea of what to try and how to proceed.

Also I'd rename the component to avoid confusion with the Listbox component you're using from Headless UI.

App.vue

<template>
   <ItemList :items='people' :selected-index='0' />
   <ItemList :items='countries' :selected-index='0' />
</template>

<script>
const people = [
    { id: 1, name: 'Durward Reynolds' },
    { id: 2, name: 'Kenton Towne' },
    { id: 3, name: 'Therese Wunsch' },
    { id: 4, name: 'Benedict Kessler' },
    { id: 5, name: 'Katelyn Rohan' },
]
const countries = [
    { id: 1, name: 'Italy' },
    { id: 2, name: 'Switzerland' },
    { id: 3, name: 'Austria' },
    { id: 4, name: 'Germany' },
]
</script>

ItemList.vue

<template>
    <Listbox v-model="selectedItem">
        <ListboxButton >
            {{ selectedItem.name }}
        </ListboxButton>

        <ListboxOptions >
            <ListboxOption
                as="template" v-slot="{ active }"
                v-for="item in items" :key="item.id"
                :value="item">
                <li :>
                    {{ item.name }}
                </li>
            </ListboxOption>
        </ListboxOptions>
    </Listbox>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import {
    Listbox,
    ListboxLabel,
    ListboxButton,
    ListboxOptions,
    ListboxOption,
} from '@headlessui/vue'

const props = defineProps({
    items: Array,
    selectedIndex: Number,
})

const selectedItem = ref(null)

onMounted(() => {
    if(items && selectedIndex >= 0 && selectedIndex < items.length) {
        selectedItem.value = items[selectedIndex]
    }
})
</script>

CodePudding user response：

You almost did what you want, only thing you need is props.
people and countries are instance of your child component DataTable.vue and you want to use them in a parent component App.vue.

DataTable.vue :

<template>
 <div id='data-table'> 
   {{table}}
 </div>
</template>
 
<script>
export default {
  .
  .
  .
 props: ['table']
}
</script>

App.vue:

<template>
   <data-table table='people' />
   <data-table table='countries' />
</template>

And also you have to Define the tables in outside the child component and then pass to the child , the better way to this is using state management like vuex