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 />