Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

fix(VTreeview): search doesn't work with return-object #20508

Merged
merged 3 commits into from
Sep 22, 2024
Merged

Conversation

yuwu9145
Copy link
Member

@yuwu9145 yuwu9145 commented Sep 21, 2024

fixes #20488
fixes #19404

Description

Markup:

<template>
  <v-card class="mx-auto" max-width="500">
    <v-sheet class="pa-4 bg-primary">
      <v-text-field
        v-model="search"
        clear-icon="mdi-close-circle-outline"
        label="Search Company Directory"
        clearable
        dark
        flat
        hide-details
        solo-inverted
      ></v-text-field>
      <v-checkbox
        v-model="caseSensitive"
        label="Case sensitive search"
        dark
        hide-details
      ></v-checkbox>
    </v-sheet>
    <v-card-text>
      <v-treeview
        :custom-filter="filterFn"
        :items="items"
        :search="search"
        item-value="id"
        return-object
        open-all
      >
        <template v-slot:prepend="{ item }">
          <v-icon
            v-if="item.children"
            :icon="`mdi-${item.id === 1 ? 'home-variant' : 'folder-network'}`"
          ></v-icon>
        </template>
      </v-treeview>
    </v-card-text>
  </v-card>
</template>

<script setup>
  import { ref } from 'vue'

  const items = ref([
    {
      id: 1,
      title: 'Vuetify Human Resources',
      children: [
        {
          id: 2,
          title: 'Core team',
          children: [
            {
              id: 201,
              title: 'John',
            },
            {
              id: 202,
              title: 'Kael',
            },
            {
              id: 203,
              title: 'Nekosaur',
            },
            {
              id: 204,
              title: 'Jacek',
            },
            {
              id: 205,
              title: 'Andrew',
            },
          ],
        },
        {
          id: 3,
          title: 'Administrators',
          children: [
            {
              id: 301,
              title: 'Mike',
            },
            {
              id: 302,
              title: 'Hunt',
            },
          ],
        },
        {
          id: 4,
          title: 'Contributors',
          children: [
            {
              id: 401,
              title: 'Phlow',
            },
            {
              id: 402,
              title: 'Brandon',
            },
            {
              id: 403,
              title: 'Sean',
            },
          ],
        },
      ],
    },
  ])
  const open = ref([1, 2])
  const search = ref(null)
  const caseSensitive = ref(false)
  const filterFn = function (value, search, item) {
    return caseSensitive.value
      ? value.indexOf(search) > -1
      : value.toLowerCase().indexOf(search.toLowerCase()) > -1
  }
</script>


@yuwu9145 yuwu9145 marked this pull request as ready for review September 22, 2024 10:34
@yuwu9145 yuwu9145 added this to the v3.7.x milestone Sep 22, 2024
@yuwu9145 yuwu9145 added T: bug Functionality that does not work as intended/expected C: VTreeview VTreeview labs labels Sep 22, 2024
@yuwu9145 yuwu9145 merged commit 1b3ed5a into master Sep 22, 2024
18 checks passed
@yuwu9145 yuwu9145 deleted the fix-20488 branch September 22, 2024 10:52
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
C: VTreeview VTreeview labs T: bug Functionality that does not work as intended/expected
Projects
None yet
1 participant