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

Posted 2023-02-22

【中文标题】如何使用 VS 2017 在 asp .net 解决方案中使用 vue-multiselect 标记？

【英文标题】：How to use vue-multiselect tagging inside asp .net solution using VS 2017?

【发布时间】：2020-08-24 03:59:17

【问题描述】：

我正在尝试使用 vue-multiselect 标记，但我遇到了一些错误，例如：

"vue.js:634 [Vue warn]: Unknown custom element: - 你是否正确注册了组件？对于递归组件，请确保提供“name”选项。”

还有：

“SyntaxError: 请求的模块 'https://unpkg.com/vue-multiselect@2.1.0' 没有提供名为 'default' 的导出”

谁能帮帮我？

我的脚本：

    <script type="module">
    import Multiselect from 'https://unpkg.com/vue-multiselect@2.1.0'

    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>

【参考方案1】：

我认为使用像 vue-multiselect 这样支持标记的自定义控件是您正在寻找的。见here。

【讨论】：

这就是我要找的。我正在尝试进行多选标记，但出现错误：[Vue 警告]：未知自定义元素： - 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

和错误：未捕获的语法错误：请求的模块“unpkg.com/vue-multiselect@2.1.0”不提供名为“默认”的导出

这与您如何设置应用程序有关。我认为您需要查看文档。您正在尝试使用该组件而没有先实际注册它，因此由于不知道您在说什么“多选”并引发错误。见vue-multiselect.js.org/#sub-getting-started。如果我解决了您的原始问题，也请接受答案。

【参考方案2】：

要呈现“导出器”列表，您必须将选择选项设置为动态。根据 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来显示或隐藏输入。

【参考方案3】：

首先包含文件：

<script src="https://unpkg.com/vue-multiselect@2.0.6"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.0.6/dist/vue-multiselect.min.css">

然后，注册组件：

components: 
    Multiselect: window.VueMultiselect.default
,

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

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