Skip to content
New issue

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

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

Already on GitHub? Sign in 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
C: VTreeview VTreeview labs T: bug Functionality that does not work as intended/expected
Projects
None yet
1 participant