0

下面的示例代码取自 vue-multiselect (v2) GitHub 页面上的 JSFiddle，并出于本示例的目的放入单个 html 页面。

如果您取消注释 v2 脚本/链接标记并注释掉 v3 标记。它工作正常。但是，使用如图所示的 v3 标记会出现错误“未捕获的 TypeError：window.VueMultiselect 未定义”。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>

<div id="app">
    <multiselect 
        v-model="value" 
        :options="options" 
        :close-on-select="false" 
        :clear-on-select="false" 
        :hide-selected="true" 
        :preserve-search="true" 
        placeholder="Pick some" 
        label="name" 
        track-by="name" 
        :preselect-first="true"
        id="example"
        @select="onSelect"
    >
    </multiselect>
    <pre class="language-json"><code>{{ value }}</code></pre>
</div>

<!-- WORKS:  vue 2 + vue-multiselect 2
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script src="https://unpkg.com/vue-multiselect@2.1.6"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.6/dist/vue-multiselect.min.css">
 -->

<!-- DOES NOT WORK:  vue 3 + vue-multiselect 3 -->
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/vue-multiselect@3.0.0-alpha.2"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect@3.0.0-alpha.2/dist/vue-multiselect.css">


<script>
    
new Vue({
    components: {
        Multiselect: window.VueMultiselect.default
    },
    data: {
        value: '',
        options: [
                { name: 'Vue.js', language: 'JavaScript' },
                { name: 'Rails', language: 'Ruby' },
                { name: 'Sinatra', language: 'Ruby' },
                { name: 'Laravel', language: 'PHP', $isDisabled: true }
            ]
    },
    methods: {
        customLabel (option) {
            return `${option.library} - ${option.language}`
        },
        onSelect (option, id) {
            console.log(option, id)
        }
    }
}).$mount('#app')

</script>

</body>
</html>
4

0 回答 0