CODEWITHSUNDEEP
javascriptjqueryasp.netvue.jsvue-multiselect
Daniel Villar
Daniel Villar

Reputation: 191

How to use vue-multiselect tagging inside asp .net solution using VS 2017?

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>

Upvotes: 1

Views: 750

Answers (3)

Daniel Villar
Daniel Villar

Reputation: 191

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:

https://github.com/shentao/vue-multiselect/issues/643

Upvotes: 1

Neillon Cesar
Neillon Cesar

Reputation: 11

To render the list of "Exporters" you must set the select options to be dynamic. According to the Vue.js docs you need to do something like:

<select v-model="selected_exporter">
  <option v-for="exporter in exporters" v-bind:value="exporter.value">
    {{ exporter.description }}
  </option>
</select>
<span>Selected: {{ selected_exporter }}</span>

Then you want to put a input if the exporter does not exists yet, you can use the v-if to show or hide the input.

Upvotes: 0

Amit Sharma
Amit Sharma

Reputation: 164

I think using a custom control like vue-multiselect with support for tagging is what you are looking for. See here.

Upvotes: 0

Related Questions