在尝试实现vueform/multiselect时，我遇到了非常奇怪的错误。我发现的大多数示例都不使用单个文件组件，这就是我想要采用的方法。我正在尝试将MultiSelect组件导入另一个名为"AgentDetails"的组件中。我正在使用VUE-CLI和VUE 3。
自定义选择.vue
<template>
<div>
<Multiselect v-model="value" :options="options" />
</div>
</template>
<script>
import Multiselect from "@vueform/multiselect";
export default {
components: {
Multiselect
},
data() {
return {
value: "Batman",
options: ["Batman", "Robin", "Joker"]
};
}
};
</script>
<style src="@vueform/multiselect/themes/default.css"></style>
AgentDetails.vue(此处是我要插入CustomSelect组件的位置(
<template>
<CustomSelect />
</template>
<script>
import { mapState, mapActions } from "vuex";
import CustomSelect from "@/components/CustomSelect.vue";
export default {
components: {
CustomSelect
}
};
</script>
我不断收到这些错误：
execution of setup function at <Multiselect modelValue=null onUpdate:modelValue=fn options= (3) ["Batman", "Robin", "Joker"] > at <CustomSelect> at <AgentDetails> at <AgentDetails agentEmail="alexandra.blanco@rubiko.tech" onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > at <RouterView> at <App> warn @ runtime-core.esm-bundler.js?5c40:38 logError @ runtime-core.esm-bundler.js?5c40:211 handleError @ runtime-core.esm-bundler.js?5c40:203 callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:157 setupStatefulComponent @ runtime-core.esm-bundler.js?5c40:6224 setupComponent @ runtime-core.esm-bundler.js?5c40:6185 mountComponent @ runtime-core.esm-bundler.js?5c40:3960 processComponent @ runtime-core.esm-bundler.js?5c40:3936 patch @ runtime-core.esm-bundler.js?5c40:3547 mountChildren @ runtime-core.esm-bundler.js?5c40:3736 mountElement @ runtime-core.esm-bundler.js?5c40:3659 processElement @ runtime-core.esm-bundler.js?5c40:3631 patch @ runtime-core.esm-bundler.js?5c40:3544 componentEffect @ runtime-core.esm-bundler.js?5c40:4053 reactiveEffect @ reactivity.esm-bundler.js?a1e9:42 effect @ reactivity.esm-bundler.js?a1e9:17 setupRenderEffect @ runtime-core.esm-bundler.js?5c40:4018 mountComponent @ runtime-core.esm-bundler.js?5c40:3976 processComponent @ runtime-core.esm-bundler.js?5c40:3936 patch @ runtime-core.esm-bundler.js?5c40:3547 mountChildren @ runtime-core.esm-bundler.js?5c40:3736 mountElement @ runtime-core.esm-bundler.js?5c40:3659 processElement @ runtime-core.esm-bundler.js?5c40:3631 patch @ runtime-core.esm-bundler.js?5c40:3544 mountChildren @ runtime-core.esm-bundler.js?5c40:3736 mountElement @ runtime-core.esm-bundler.js?5c40:3659 processElement @ runtime-core.esm-bundler.js?5c40:3631 patch @ runtime-core.esm-bundler.js?5c40:3544 mountChildren @ runtime-core.esm-bundler.js?5c40:3736 mountElement @ runtime-core.esm-bundler.js?5c40:3659 processElement @ runtime-core.esm-bundler.js?5c40:3631 patch @ runtime-core.esm-bundler.js?5c40:3544 mountChildren @ runtime-core.esm-bundler.js?5c40:3736 mountElement @ runtime-core.esm-bundler.js?5c40:3659 processElement @ runtime-core.esm-bundler.js?5c40:3631 patch @ runtime-core.esm-bundler.js?5c40:3544 mountChildren @ runtime-core.esm-bundler.js?5c40:3736 mountElement @ runtime-core.esm-bundler.js?5c40:3659 processElement @ runtime-core.esm-bundler.js?5c40:3631 patch @ runtime-core.esm-bundler.js?5c40:3544 mountChildren @ runtime-core.esm-bundler.js?5c40:3736 mountElement @ runtime-core.esm-bundler.js?5c40:3659 processElement @ runtime-core.esm-bundler.js?5c40:3631 patch @ runtime-core.esm-bundler.js?5c40:3544 componentEffect @ runtime-core.esm-bundler.js?5c40:4053 reactiveEffect @ reactivity.esm-bundler.js?a1e9:42 effect @ reactivity.esm-bundler.js?a1e9:17 setupRenderEffect @ runtime-core.esm-bundler.js?5c40:4018 mountComponent @ runtime-core.esm-bundler.js?5c40:3976 processComponent @ runtime-core.esm-bundler.js?5c40:3936 patch @ runtime-core.esm-bundler.js?5c40:3547 mountChildren @ runtime-core.esm-bundler.js?5c40:3736 mountElement @ runtime-core.esm-bundler.js?5c40:3659 processElement @ runtime-core.esm-bundler.js?5c40:3631 patch @ runtime-core.esm-bundler.js?5c40:3544 componentEffect @ runtime-core.esm-bundler.js?5c40:4053 reactiveEffect @ reactivity.esm-bundler.js?a1e9:42 effect @ reactivity.esm-bundler.js?a1e9:17 setupRenderEffect @ runtime-core.esm-bundler.js?5c40:4018 mountComponent @ runtime-core.esm-bundler.js?5c40:3976 processComponent @ runtime-core.esm-bundler.js?5c40:3936 patch @ runtime-core.esm-bundler.js?5c40:3547 componentEffect @ runtime-core.esm-bundler.js?5c40:4117 reactiveEffect @ reactivity.esm-bundler.js?a1e9:42 callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:154 flushJobs @ runtime-core.esm-bundler.js?5c40:364 Promise.then (async) queueFlush @ runtime-core.esm-bundler.js?5c40:264 queueJob @ runtime-core.esm-bundler.js?5c40:258 run @ reactivity.esm-bundler.js?a1e9:183 trigger @ reactivity.esm-bundler.js?a1e9:189 set value @ reactivity.esm-bundler.js?a1e9:721 finalizeNavigation @ vue-router.esm-bundler.js?6c02:2585 eval @ vue-router.esm-bundler.js?6c02:2458 Promise.then (async) pushWithRedirect @ vue-router.esm-bundler.js?6c02:2429 push @ vue-router.esm-bundler.js?6c02:2369 navigate @ vue-router.esm-bundler.js?6c02:1997 callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:154 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js?5c40:163 invoker @ runtime-dom.esm-bundler.js?830f:292 Show 36 more frames runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next at <Multiselect modelValue=null onUpdate:modelValue=fn options= (3) ["Batman", "Robin", "Joker"] > at <CustomSelect> at <AgentDetails> at <AgentDetails agentEmail="alexandra.blanco@rubiko.tech" onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > at <RouterView> at <App> warn @ runtime-core.esm-bundler.js?5c40:38 logError @ runtime-core.esm-bundler.js?5c40:211 handleError @ runtime-core.esm-bundler.js?5c40:203 callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:157 flushJobs @ runtime-core.esm-bundler.js?5c40:364 Promise.then (async) queueFlush @ runtime-core.esm-bundler.js?5c40:264 queueJob @ runtime-core.esm-bundler.js?5c40:258 run @ reactivity.esm-bundler.js?a1e9:183 trigger @ reactivity.esm-bundler.js?a1e9:189 set value @ reactivity.esm-bundler.js?a1e9:721 finalizeNavigation @ vue-router.esm-bundler.js?6c02:2585 eval @ vue-router.esm-bundler.js?6c02:2458 Promise.then (async) pushWithRedirect @ vue-router.esm-bundler.js?6c02:2429 push @ vue-router.esm-bundler.js?6c02:2369 navigate @ vue-router.esm-bundler.js?6c02:1997 callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:154 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js?5c40:163 invoker @ runtime-dom.esm-bundler.js?830f:292 multiselect.js?a306:1 Uncaught (in promise) TypeError: Cannot read property 'value' of undefined at re (multiselect.js?a306:1) at q (multiselect.js?a306:1) at setup (multiselect.js?a306:1) at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:154) at setupStatefulComponent (runtime-core.esm-bundler.js?5c40:6224) at setupComponent (runtime-core.esm-bundler.js?5c40:6185) at mountComponent (runtime-core.esm-bundler.js?5c40:3960) at processComponent (runtime-core.esm-bundler.js?5c40:3936) at patch (runtime-core.esm-bundler.js?5c40:3547) at mountChildren (runtime-core.esm-bundler.js?5c40:3736)```
好的，弄清楚发生了什么，为了让多选工作，你需要在组件数据上有一个特定的对象结构，如果没有，Vue不会实例化组件，你会得到很多奇怪的错误，这里有一个例子：
options: {
value: [],
options: [
{ value: "batman", label: "Batman" },
{ value: "robin", label: "Robin" },
{ value: "joker", label: "Joker" }
]
}