javascriptvue.jsvuejs3vue-multiselect

how use VueMultiselect whit Vue 3


I'm trying to use the vue multiselect component but when I call the component in the template I get a series of warnings and at JS

<script src="https://unpkg.com/vue-multiselect@2.1.0"></script>
<script src="https://unpkg.com/vue@3.2.37/dist/vue.global.js"></script>



<script>

// Componenete Principal

const { createApp } = Vue;


const componentCaptura = {
    components:{
        'vue-multiselect': window.VueMultiselect.default,

    },
    data(){
        return {
            message:"hellow of the component child",
            productos:[],
            producto:null
        }
    },
    mounted(){},
    template:/* html */`
    <div class="content-wrapper animated fadeInLeft" style="padding: 0 2.2rem;">
        <div class="content-header row mb-1" style="border-bottom: 1px solid #d8d8d8;  -webkit-box-shadow:0 3px 5px -6px #222;-moz-box-shadow:0 3px 5px -6px #222;box-shadow:0 3px 5px -6px #222;">
            <div class="content-header-left col-md-6 col-12 mb-2 breadcrumb-new">
                <h2 class="content-header-title mb-0 d-inline-block">CONTROL ORIGINACION</h2>
                <div class="row breadcrumbs-top d-inline-block">
                    <div class="breadcrumb-wrapper col-12">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a><b>REPORTE CAPTURA DIARIA</b></a></li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <section id="dom">
            <div class="row">
                <div class="col-4">
                    <div class="card">
                        <div class="card-content collapse show">
                            <div class="card-header bg-gradient-x-info" style="border-bottom: 1px solid rgb(216, 216, 216); box-shadow: rgb(34, 34, 34) 0px 3px 5px -6px;">
                                <h4 class="card-title text-white" id="file-repeater">Captura</h4>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-xl-12">
                                    <vue-multiselect  :options="[]" placeholder="Seleccionar Cliente..."  ></vue-multiselect>

                                    </div>
                                </div>
                                <div class="form row">
                                    <fieldset class="form-group position-relative has-icon-left col-xl-6">
                                        <input type="text" class="form-control round" id="iconLeft10" placeholder="FECHA">
                                        <div class="form-control-position">
                                            <i class="la la-calendar info"></i>
                                        </div>
                                    </fieldset>
                                    <fieldset class="form-group position-relative has-icon-left col-xl-6">
                                        <input type="text" class="form-control round" id="iconLeft10" placeholder="EXPEDIENTES">
                                        <div class="form-control-position">
                                            <i class="la la-clipboard info"></i>
                                        </div>
                                    </fieldset>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    `,
};


    
let app = createApp({
     data() {
         return {
             message: 'Hello !'
         };
     },
     mounted(){},
     components: {
         'component-captura':componentCaptura
     },
     });
    app.mount('#app');



</script>

HTML

<div class="content-wrapper" style="padding-top: 0px;">
   <div class="content-body">
        <div id="app">

            <component-captura></component-captura>
        </div>
   </div>
</div>

The error only occurs when it calls the vueselect component.

Any clue to solve the problem.

WARNINGS OF THE CONSOLE AND ERRORS

vue.global.js:1616 [Vue warn]: Property "$createElement" was accessed during render but is not defined on instance. 
  at <VueMultiselect options= [] placeholder="Seleccionar Cliente..." > 
  at <Anonymous> 
  at <App>
warn$1 @ vue.global.js:1616
(anonymous) @ VM5920:2185
Show 35 more frames
vue.global.js:1616 [Vue warn]: Property "_self" was accessed during render but is not defined on instance. 
  at <VueMultiselect options= [] placeholder="Seleccionar Cliente..." > 
  at <Anonymous> 
  at <App>

Show 35 more frames
vue.global.js:1616 [Vue warn]: Unhandled error during execution of render function 
  at <VueMultiselect options= [] placeholder="Seleccionar Cliente..." > 
  at <Anonymous> 
  at <App>

Show 35 more frames
vue.global.js:1796 Uncaught TypeError: Cannot read properties of undefined (reading '_c')
    at Proxy.i (vue-multiselect@2.1.0:1:36878)

I add what the console throws me to show a little more about my problem


Solution

  • The 'latest' version of the Multiselect (https://github.com/shentao/vue-multiselect) doesn't support Vue 3, however the next version does. Check this out for install and setup instructions: https://github.com/shentao/vue-multiselect/tree/next