Is it possible to work with more than one array in vuetify v-autocomplete?

user_11295843 0
Viewed 184

Normally one would just make a simple join to merge both arrays in one array, the problem is that i have arrays with different object structures, and depending on the type of object, i need to pass a different value.

Example:

array 1: fruits.type.name
array 2: animals.family.name

Is there any possibility other than having to craft a custom component from scratch using something like v-text-input, for example?

vuetify.js
2 Answers

You mean something like this? Check this codesanbox I made: https://codesandbox.io/s/stack-71429578-switch-autocomplete-array-757lve?file=/src/components/Example.vue

Example

 computed: {
      autoArray() {
         return this.typeAnimal ? this.animals : this.fruits
      },
      autoTypeId() {
         return this.typeAnimal ? 'family.id' : 'type.id'
      },
      autoText() {
         return this.typeAnimal ? 'family.name' : 'type.name'
      }
   }

With help of a couple computed props you could be able to switch array, item-text and item-value depending of the array you're working with.

user_68795590

As far as I know, there's no easy way to supply two different arrays to v-autocomplete and retain the search functionality.

You could probably join the arrays and write a custom filter property. Then use selection and item slots to change the output of the select based on the structure.

But if your data arrays aren't too complicated, I would avoid the above. Instead, I would loop through both arrays, and build a new combined one with a coherent structure.

user_72647990
Related