在 vuetify 和 vuejs3 上使用单一选择策略检索数据

Question

我的问题是搜索工作正常，但在选择复选框后我无法检索任何值。

我有两个组件：

• MyTableAnnuaire.vue 和
• 添加.vue

这是我的代码：

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>

添加.vue

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

Answer 1

这是这个问题的解决方案：

• 组件 - MyTableAnnuaire.vue

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

• 组件 - add.vue

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