I have a script running PrimeVue as a script import:
Code: Select all
<!DOCTYPE html>
<html>
<head>
<title>MultiSelect</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://unpkg.com/primevue/resources/themes/saga-blue/theme.css" rel="stylesheet">
<link href="https://unpkg.com/primevue/resources/primevue.min.css" rel="stylesheet">
<link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet">
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/primevue@3.5.1/ripple/ripple.min.js"></script>
<script src="https://unpkg.com/primevue@3.5.1/multiselect/multiselect.js"></script>
</head>
<body>
<div id="app">
<p-multiselect v-model="form" :options="cars" optionLabel="brand" placeholder="Select Brands" display="chip"></p-multiselect>
</div>
<script>
const theScript = {
data() {
return {
form: '',
cars: [
{brand: 'Audi', value: 'Audi'},
{brand: 'BMW', value: 'BMW'},
{brand: 'Fiat', value: 'Fiat'},
{brand: 'Honda', value: 'Honda'},
{brand: 'Jaguar', value: 'Jaguar'},
{brand: 'Mercedes', value: 'Mercedes'},
{brand: 'Renault', value: 'Renault'},
{brand: 'Volkswagen', value: 'Volkswagen'},
{brand: 'Volvo', value: 'Volvo'}
]
};
},
methods: {
},
components: {
'p-multiselect': primevue.multiselect
}
}
Vue.createApp(theScript).mount('#app')
</script>
</script>
</body>
</html>
Code: Select all
Uncaught TypeError: Cannot read property 'DomHandler' of undefined
at Proxy.onClick (multiselect.js:168)
at vue.createBlock.onClick._cache.<computed>._cache.<computed> (multiselect.js:597)
at callWithErrorHandling (vue@next:1420)
at callWithAsyncErrorHandling (vue@next:1429)
at HTMLDivElement.invoker (vue@next:9302)
I went down the dependency rabbit hole and ended up adding these scripts to try to fix the type errors:
Code: Select all
<script src="https://unpkg.com/primevue@3.5.1/config/config.min.js"></script>
<script src="https://unpkg.com/primevue@3.5.1/api/api.min.js"></script>
<script src="https://unpkg.com/primevue@3.5.1/utils/utils.min.js"></script>
<script src="https://unpkg.com/primevue@3.5.1/overlayeventbus/overlayeventbus.min.js"></script>
That's as far as I was able to get down the rabbit hole and the last error is:
Code: Select all
Uncaught (in promise) TypeError: Cannot read property 'config' of undefined
at Proxy.panelStyleClass (multiselect.js:467)
at ComputedRefImpl.reactiveEffect [as effect] (vue@next:410)
at ComputedRefImpl.get value [as value] (vue@next:1244)
at Object.get [as panelStyleClass] (vue@next:4338)
at multiselect.js:673
at Proxy.renderFnWithContext (vue@next:2379)
at Proxy.<anonymous> (vue@next:3454)
at renderComponentRoot (vue@next:2422)
at componentEffect (vue@next:6479)
at Object.reactiveEffect [as update] (vue@next:410)
Many thanks,
Ray