I'm trying to use vue-multiselect tagging, but im getting some errors like:
"vue.js:634 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option."
And:
"SyntaxError: The requested module 'https://unpkg.com/[email protected]' does not provide an export named 'default'"
Can Anyone helps me?
my script:
<script type="module">
import Multiselect from 'https://unpkg.com/[email protected]'
export default {
components: {
Multiselect
},
data() {
return {
value: [
{ name: 'Javascript', code: 'js' }
],
options: [
{ name: 'Vue.js', code: 'vu' },
{ name: 'Javascript', code: 'js' },
{ name: 'Open Source', code: 'os' }
]
}
},
methods: {
addTag(newTag) {
const tag = {
name: newTag,
code: newTag.substring(0, 2) + Math.floor((Math.random() * 10000000))
}
this.options.push(tag)
this.value.push(tag)
}
}
}
</script>
my html code:
<div>
<label class="typo__label">Tagging</label>
<multiselect v-model="value" tag-placeholder="Add this as new tag" placeholder="Search or add a tag" label="name" track-by="code" :options="options" :multiple="true" :taggable="true"></multiselect>
<pre class="language-json"><code>{{ value }}</code></pre>
</div>
First include the files:
<script src="https://unpkg.com/[email protected]"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-multiselect.min.css">
Then, register the component:
components: {
Multiselect: window.VueMultiselect.default
},
I found the solution here: