Select With Input Get Key for Redirect

[CynthiaBlue]

I am using a select which searches a database table and shows the user all the dogs in a table. This works fine and the user can type in a dog's name, and a filter is used to narrow down the options.

What I'm trying to do is pull the dog's key out of that field to send it to a method so when a certain dog is clicked, the user is redirected to another page with detail information about that dog.

So basically I need to pull the dog's key out of the filter and pass it to the method, and I don't know how.

As the user types in the select and the dogs are narrowed down, say 2 dogs are left in the results from the filter. If I use the following code, it passes both of those results to the method, but I only want the dog that is clicked on, not all the results from the filter. If the user just clicks on one of the dogs in the drop down without typing anything in, the entire array of dogs is sent to the method. How do I just get the one selected dog's key sent to the method?
Thanks!

This is my code:

              <q-select
                filled
                outlined
                standout=""
                :model-value="modelForDogs"
                use-input
                hide-selected
                fill-input
                input-debounce="0"
                :options="optionsDogInput"
                @filter="filterDogs"
                @input-value="inputValueDogs"
                bg-color="blue-2" 
                color="lime-11"
                text-color="black"
                label-color="black"
                label="Go Directly To a Dog"
                style="width: 300px; padding-bottom: 32px"
                @update:model-value="goDirectToDog(optionsDogInput)"
              >
           <template v-slot:prepend>
                <q-icon 
                name="far fa-dog" 
                color="black"
                />
              </template>
                <template v-slot:no-option>
                  <q-item>
                    <q-item-section class="text-black">
                      No results
                    </q-item-section>
                  </q-item>
                </template>
              </q-select>

<script>
import myDB from '../components/DexieConnect.js'
import { ref } from "vue"

const stringDogOptions = [
  'notneeded'
]
.reduce((accDog, opt) => {
    myDB.dogTable
        .each(dogOBJ => {
          accDog.push({value: dogOBJ.pk_dog, label: dogOBJ.dogCallName})
        })
    console.log(" accDog: ", accDog, accDog.length)
    return accDog
  }, 

[])

export default {
  name: 'MainLayout',

  setup() {

    const modelForDogs = ref(null)
    const optionsDogInput = ref(stringDogOptions)
    const theFilteredDogs = ref(null)

    return {
     active: ref(true),
     modelForDogs,
     optionsDogInput,

     filterDogs (val, update, abort) {
        update(() => {
          const needle = val.toLocaleLowerCase()
          optionsDogInput.value = stringDogOptions.filter(option => {
           return option.label.toLowerCase().indexOf(needle) > -1
        })
          console.log(" in filter optionsDogInput.value : ", optionsDogInput.value )
        })
      },

      inputValueDogs (val) {
        modelForDogs.value = val
      },
     
    }
  }, // end setup

Methods:
  async goDirectToDog(theDogKey) {
      console.log("goDirectToDog: ", theDogKey)
}

[CynthiaBlue]

Okay nevermind, I had to add a v-model and passing that works.

Another question though, where I initially do the database call, how can I sort the results that I get? I want to sort them for display and a regular sort isn't working.

const stringDogOptions = [
  'notneeded'
].reduce((dogsForDropDown, opt) => {
    myDB.dogTable
        .each(dogOBJ => {
          dogsForDropDown.push({value: dogOBJ.pk_dog, label: dogOBJ.dogCallName})
        })

      // // this sort isnt working - 20230703
      dogsForDropDown.sort((a, b) => {
        if (a.value > b.value) {
          return 1
          } else {
            return -1
          }
            return 0
        })

    console.log(" dogsForDropDown: ", dogsForDropDown)
    return dogsForDropDown
  }, 

[])