(this.internalValue ||[]).在v-select上启用多重选择时，findIndex不是一个函数.

Question

我正在使用Vue.js与Vuetify。

下面是我的最小可复制示例:

<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>

这个例子工作完美，直到你想在v-select组件上启用多重选择。

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

一旦你点击这个组合框，你就会看到这个:

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)

Answer 1

这似乎是由Vue CLI4.5.11编译Vuetify引起的问题。如果您从transpileDependencies中移除vuetify，您的示例将正常工作:

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

有趣的是，这在Vue CLI5.0.0-alpha.4中根本不是问题(不需要更改配置)，所以考虑升级。

Answer 2

我也遇到了同样的问题。我把它留在这里，以防它对你有用:

<!-- 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" },
],
}),
}

Answer 3

当我切换v-select的multiple属性时，我有同样的问题。转载链接:https://codepen.io/kkojot/pen/MWOpYqZ

要避免此错误，您必须清除绑定到v-model的属性，并相应地将其更改为空对象{}或空数组[]。

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;
},

},