Multiselect component not working as a standalone component

UI Components for Vue
Post Reply
tinpotray
Posts: 2
Joined: 23 Sep 2020, 17:07

09 Jul 2021, 15:42

Hi,

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>
However, in the console I get an error:

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)
Any ideas on how to fix this?

Many thanks,

Ray

tugce.kucukoglu
Posts: 560
Joined: 23 Oct 2020, 09:28

17 Nov 2021, 14:20

Hi,

Sorry for the late answer. All examples are rewritten for browser usage. You just need to import component and

Code: Select all

<script src="https://unpkg.com/primevue/core/core.min.js"></script>
Thanks,

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests