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

【问题标题】：(this.internalValue || []).findIndex is not a function when enabling multiple selection on v-select(this.internalValue || []).findIndex 不是在 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 和默认值。这有效地创建了您链接到的同一项目。

标签： node.js vue.js vuejs2 vue-component vuetify.js

【解决方案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" },
    ],
  }),
}

【讨论】：