如何在Vue3中获取Ref数组的属性值

Question

I'm using a ref to define the values of a select element in a Vue3 app like this, and binding it to another ref.

<v-select
      v-model="selectedLevels"
      :items="levels"
      multiple
      label="Levels"
    ></v-select>

... 
const selectedLevels = ref([])

const levels = ref([
    { title: 'Level 1', value: 1 },
    { title: 'Level 2', value: 2 },
    { title: 'Level 3', value: 3 },
    { title: 'Level 4', value: 4 }
  ])

The selection is passed to a function to call the API, apending the level selected as a query parameter.

export function useCategoriesQuery(
  {
    page = 1,
    levels = [1, 2, 3]
  }: { page?: Ref<number> | number; levels?: Ref<number[]> | number[] },
  { enabled }: { enabled: ComputedRef<boolean> | boolean } = { enabled: true }
) {
  return useQuery(
    ['categories', { page, levels }],
    () =>
      axios.get<{ data: ICategory[] }>(`/products/categories/`, {
        params: {
          page: page instanceof Object ? page.value : page,
          levels: Array.isArray(levels) ? levels : levels.value
        }
      }),
    {
      enabled,
      select: (response) =>
        response.data.data
          .map((dataDto) => new Category(dataDto))
          .sort((a, b) => (a.order > b.order ? 1 : -1))
    }
  )
}

I use this function useCategoryQuery in another views of the application without problem. Normally the level variable, as you can see in the type definition, is either a number or an array of numbers, level=1 or level=1,2,3 for example.

The problem, as you can imagine, is that the ref variable is not an Array or a number, it's a ref object (type never because it's not defined). I tried to map the values, but without success. I always get a "levels.map is not a function" or "levels.value.map undefined".

Tried:

if (levels instanceof Object) {
  selection = levels.value.map(level => level.value)
}

This works in the view before passing as parameter, but only when I have 1 item selected (note that multiple is enabled)

 Object.values(levels)

How I can get the value prop of the selected items of the Ref?

Answer 1

Have you tried

if (levels.value instanceof Object) {
  selection = levels.value.map(level => level.value)
}