开发者问题收集

如何使用 VS 2017 在 asp .net 解决方案中使用 vue-multiselect 标记?

2020-05-08
719

我正在尝试使用 vue-multiselect 标记,但出现了一些错误,例如:

“vue.js:634 [Vue warn]: 未知的自定义元素:- 您是否正确注册了组件?对于递归组件,请确保提供“name”选项。”

并且:

“SyntaxError:请求的模块' https://unpkg.com/ [email protected] ' 未提供名为“default”的导出”

有人能帮帮我吗?

我的脚本:

    <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>

我的 html 代码:

                <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>
3个回答

首先包含文件:

<script src="https://unpkg.com/[email protected]"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-multiselect.min.css">

然后,注册组件:

components: {
    Multiselect: window.VueMultiselect.default
},

我在这里找到了解决方案:

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

Daniel Villar
2020-05-12

我认为使用支持标记的自定义控件(如 vue-multiselect)正是您所需要的。请参阅 此处

Amit Sharma
2020-05-08

要呈现“导出器”列表,您必须将选择选项设置为动态。根据 Vue.js 文档,您需要执行以下操作:

<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>

然后,如果导出器尚不存在,您需要输入一个输入,您可以使用 v-if 来显示或隐藏输入。

Neillon Cesar
2020-05-08