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
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