(this.internalValue || []).findIndex is not a function when enabling multiple selection on v-select

user_939986 0
Viewed 776

I am using Vue.js with Vuetify.

Following is my minimal reproducible example:

<template>
  <v-app>
    <v-select v-model="site" :items="sites" item-value="_id" item-text="name"></v-select>
    <v-btn @click="showSelections">Show Selections</v-btn>
  </v-app>
</template>

<script>
export default {
  name: 'App',

  data: () => ({
    site: [],
    sites: [
  {
    name: 'Vancouver',
    _id: '5d9c276784e00100699281e2',
  },
  {
    name: 'LA',
    _id: '5d9c276784e00100699281e5',
  },
  {
    name: 'Montreal',
    _id: '5d9c276784e00100699281e3',
  },
],
  }),
  methods: {
    showSelections: function() {
      console.log(this.site);
    }
  }
};
</script>

This example works perfect until you want to enable multiple selection on the v-select component.

<v-select v-model="site" :items="sites" multiple item-value="_id" item-text="name"></v-select>

As soon as you click the combobox, you'd get this:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler: "TypeError: (this.internalValue || []).findIndex is not a function"

found in

---> <VSelectList>
       <VThemeProvider>
         <VMenu>
           <VSelect>
             <VMain>
               <VApp>
                 <App> at src/App.vue
                   <Root>

TypeError: (this.internalValue || []).findIndex is not a function
    at VueComponent.findExistingIndex (VSelect.ts?1576:338)
    at VueComponent.selectItem (VSelect.ts?1576:816)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at VueComponent.invoker (vue.runtime.esm.js?2b0e:2179)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at VueComponent.Vue.$emit (vue.runtime.esm.js?2b0e:3888)
    at click (VSelectList.ts?7bd1:169)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at VueComponent.invoker (vue.runtime.esm.js?2b0e:2179)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
vuejs2 vue-component vuetify.js vue.js node.js
3 Answers

This seems to be an issue caused by Vue CLI 4.5.11 transpiling Vuetify. If you remove vuetify from transpileDependencies, your example works properly:

// vue.config.js
module.exports = {
  // transpileDependencies: [
  //   'vuetify'
  // ]
}

Interestingly, this isn't a problem at all (no config changes needed) with Vue CLI 5.0.0-alpha.4, so consider upgrading.

user_62771510

I had the same problem. I leave you here as I have it in case it works for you:

<!-- VueJS Template -->
<v-select :items="arrayItems" v-model="arrayItemsSelected" label="Items" item-text="text" outlined multiple chips attach dark></v-select>

// VueJS Data
export default {
  data: () => ({
    arrayItemsSelected: [],
    arrayItems: [
      { value: "Item1", text: "Item1" },
      { value: "Item2", text: "Item2" },
      { value: "Item3", text: "Item3" },
      { value: "Item4", text: "Item4" },
      { value: "Item5", text: "Item5" },
    ],
  }),
}
user_95349530

I had the same issue when I was toggling the multiple property of the v-select. See the reproduction link: https://codepen.io/kkojot/pen/MWOpYqZ

To avoid this error you have to clear the property bound to v-model and change it empty object {} or empty array [] accordingly.

computed: {
 isMultiple() {
  //comment the if statment below to see the 'TypeError: (this.internalValue || []).findIndex is not a function'
  if (this.multiple) this.site = [];
  else this.site = {};
  return this.multiple;
},

},

user_85051280
Related