vueform/multiselect 不能作为单个文件组件工作

Question

我在尝试实施 vueform/multiselect 时遇到了非常奇怪的错误。我发现的大多数示例都不使用单文件组件，而这正是我想要采用的方法。我正在尝试将 MultiSelect 组件导入到另一个名为 'AgentDetails' 的组件中。我正在使用 VUE-CLI 和 VUE 3。

CustomSelect.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)```

Answer 1

好吧，弄清楚发生了什么，为了让 multi-select 工作，你需要在组件数据上有一个特定的对象结构，否则 Vue 不会实例化组件，你将得到很多奇怪的错误，这里有一个例子：

  options: {
    value: [],
    options: [
      { value: "batman", label: "Batman" },
      { value: "robin", label: "Robin" },
      { value: "joker", label: "Joker" }
    ]
  }

vueform/multiselect 不能作为单个文件组件工作

vueform/multiselect not working as a single file component

vue.js

vue-multiselect