I'm currently experimenting with the vue multiselect component, but when I include it in the template, I am encountering a series of warnings and errors.
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="067073632b6b736a726f75636a636572463428372836">[email protected]</a>"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="90e6e5f5d0a3bea2bea3a7">[email protected]</a>/dist/vue.global.js"></script>
// Main Component
const { createApp } = Vue;
const componentCaptura = {
components:{
'vue-multiselect': window.VueMultiselect.default,
},
data(){
return {
message:"Hello from the child component",
products:[],
product: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 issue seems to be related to the vueselect component triggering the warnings and errors.
If you have any insights on how to address this problem, please share.
CONSOLE WARNINGS AND ERRORS:
vue.global.js:1616 [Vue warn]: Property "$createElement" was accessed during render but is not defined on instance.
at <VueMultiselect options= [] placeholder="Select Client..." >
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="Select Client..." >
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="Select Client..." >
at <Anonymous>
at <App>
Show 35 more frames
vue.global.js:1796 Uncaught TypeError: Cannot read properties of undefined (reading '_c')
at Proxy.i (<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e686b7b33736b728202876ce38785838e868d93778388878988">[email protected]</a>:1:36878)
To provide further insight into my issue, I've included the console log details above.