Giters

shentao / vue-multiselect

Universal select/multiselect/tagging component for Vue.js

Home Page:https://vue-multiselect.js.org/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Vue3 CDN not working

amchconsult opened this issue · comments

commented

I can not make it work.
I am using CDN <script src="https://cdn.jsdelivr.net/npm/vue-multiselect@3.0.0-beta.3/dist/vue-multiselect.umd.js"></script>

As global
.component('Multiselect', "vue-multiselect")
but component is not showing

Can you help me? thank you

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>VUE 3 TEST 12</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-multiselect@3.0.0-beta.3/dist/vue-multiselect.css">
</head>
<body>

<style>
    
</style>

<div id="app">
    <div class="container mt-4">
        <p>Selected: {{selected}}</p>

        <Multiselect
            v-model="selected"
            :options="options.map((o) => o._id)"
            :custom-label="(_id) => options.find((o) => o._id === _id)?.model"
        ></Multiselect>

        <Multiselect
            v-model="selected"
            :options="option"
        ></Multiselect>
        

    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@3.4.20/dist/vue.global.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-multiselect@3.0.0-beta.3/dist/vue-multiselect.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<script>
    var vm = Vue.createApp({
        data(){
            return {
                selected: null,
                option: ['list', 'of', 'options'],
                options:[
                    { "_id": 5, "code": "", "model": "Bus 5", "modelyear": "2006", "color": "White", "vehicletype": "BUS-24", "licenseplate": "336hhg", "licenseexpire": "2020-02-15", "capacity": "24", "vehicleowner": "OWN", "lasttuneupdate": "2020-02-15", "codecolor": "WHITE", "picture": "", "status": "ACTIVE", "auditlog": "2022-03-06,09:10:59,1,Alejandro" },
                    { "_id": 6, "code": "", "model": "Bus 6", "modelyear": "2006", "color": "White", "vehicletype": "BUS-24", "licenseplate": "hhbd76", "licenseexpire": "2020-02-15", "capacity": "24", "vehicleowner": "OWN", "lasttuneupdate": "2020-02-15", "codecolor": "WHITE", "picture": "", "status": "INACTIVE", "auditlog": "2022-03-14,10:50:37,2,Scott" },
                    { "_id": 7, "code": "", "model": "Bus 7", "modelyear": "2013", "color": "White", "vehicletype": "BUS-18", "licenseplate": "443ddgf", "licenseexpire": "2020-02-15", "capacity": "18", "vehicleowner": "OWN", "lasttuneupdate": "2020-02-15", "codecolor": "WHITE", "picture": "", "status": "ACTIVE", "auditlog": "2022-03-06,09:10:43,1,Alejandro" },
                ]
            }
        },
        methods: {
            
        }
    })
    .component('Multiselect', "vue-multiselect")
    .mount('#app')
</script>

</body>
</html>
commented

Hi @amchconsult, I know what is the issue, basically you are trying to register globally, but it is being done incorrectly, you must register the component like this:

.component('Multiselect', window['vue-multiselect'].default)

Documentation reference for registering the global component using the CDN: https://vue-multiselect.js.org/#sub-getting-started

I would also like to add a comment to your code, it is not necessary to save Vue.createApp in a variable. It can look like this:

      Vue.createApp({
            data() {
                return {
                    selected: null,
                    option: [...],
                    options: [...]
                }
            }
        })
        .component('Multiselect', window['vue-multiselect'].default)
        .mount('#app')

I hope this has helped you solve the issue.

commented

It works perfect.
Thank you