(this.internalValue || []).findIndex 不是在 v-select 上启用多选时的函数

Posted 2023-02-16

【中文标题】(this.internalValue || []).findIndex 不是在 v-select 上启用多选时的函数

【英文标题】：(this.internalValue || []).findIndex is not a function when enabling multiple selection on v-select

【发布时间】：2021-05-22 08:24:15

【问题描述】：

我正在使用 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)

【问题讨论】：

似乎在这个codepen 中工作。

是的，它在那里工作。能否请您引导一个新的 Vue 应用程序并离线尝试？

有了这个：gitlab.com/sntshk/temp-vuetify?

是的，我使用vue create proj 和默认值，然后vue add vuetify 和默认值。这有效地创建了您链接到的同一项目。

【参考方案1】：

这似乎是由 Vue CLI 4.5.11 转译 Vuetify 引起的问题。如果您从transpileDependencies 中删除vuetify，则您的示例可以正常工作：

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

有趣的是，使用 Vue CLI 5.0.0-alpha.4 这根本不是问题（无需更改配置），因此请考虑升级。

【讨论】：

我尝试评论这些行。现在错误是：TypeError: (this.internalValue || []).slice is not a function.

为了创建这个例子，我的版本是“~4.5.0”。

是@vue/cli 4.5.10。

我在 Vue CLI 5 中没有看到错误。我建议升级。

无论如何，生产应用程序（不是这个例子）不使用 Vue CLI。该项目是使用 webpack 构建的。

【参考方案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" ,
    ],
  ),