javascriptvuejs3vuetifyjs3

How can I retrieve data with single select-strategy on Vuetify and VueJS 3?

My issue is that the search works fine, but I can't retrieve any value after selecting a checkbox.

I have two components :

Here is my code :

MyTableAnnuaire.vue

    <v-text-field v-model="searchTerm" prepend-inner-icon="mdi-magnify" density="compact" label="Rechercher" flat
          hide-details variant="solo-filled"></v-text-field>
     
  
  
      <v-data-table class="blue-header" :headers="headers" :items="filteredItems" density="compact" hover="true"
        no-data-text="Pas de données disponibles" :fixed-header="true" :items-per-page="-1" :height="250"
        item-value="clcode" select-strategy="single" show-select
        hide-default-footer >

      </v-data-table>

add.vue

          <MyTableAnnuaire
            :headers="headers"
            :items="list"
            v-model:selected="selectedItems"
          />

enter image description here

Solution

  • This is the solution for this issue :

    
<v-data-table class="blue-header" :headers="headers" :items="filteredItems" density="compact" hover
      no-data-text="No data" :fixed-header="true" :height="250" item-value="seq"
      select-strategy="single" show-select v-model="internalSelected" @update:items-per-page="logItem" />

<script>

    // Emit the selected object (entire item) to the parent whenever it changes

    watch(internalSelected, (newVal) => {
      if (newVal && newVal.length > 0) {
        const selectedItem = props.items.find(item => item.seq === newVal[0]); // Sélectionner l'objet entier basé sur seq
        emit('update:modelValue', selectedItem);
      }
    });

    // Filter items based on search input

    const filteredItems = computed(() => {
      if (!props.items || !Array.isArray(props.items)) {
        return []; // If no items, return empty array
      }

    return {
      filteredItems,
      internalSelected,
    };

</script>


    <MyTableAnnuaire :headers="headers" :items="list" v-model="selected_client" return-object />