( this . internalValue || [ ] ).findIndex는 v-select에서 여러 항목을 선택할 때 사용할 수 없음

( this . internalValue || [ ] ).findIndex는 v-select에서 여러 항목을 선택할 때 사용할 수 없음

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>

이 예는, 로 복수의 선택을 netable로 할 때까지 완전하게 기능합니다.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)

이는 Vue CLI로 인해 발생한 문제인 것 같습니다.4.5.11Vuetify를 번역합니다.를 삭제하면vuetify부터transpileDependencies이 예에서는 정상적으로 동작합니다.

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

흥미롭게도 Vue CLI에서는 이 문제가 전혀 발생하지 않습니다(구성 변경 불필요).5.0.0-alpha.4업그레이드를 검토해 주십시오.

저도 같은 문제가 있었어요.당신에게 도움이 될 경우를 대비해서 여기 두겠습니다.

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

같은 문제가 발생하였습니다.multiplev-select의 속성입니다.레플리케이션 링크 참조: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;
},

},

언급URL:https://stackoverflow.com/questions/66275970/this-internalvalue-findindex-is-not-a-function-when-enabling-multiple-se