如何使用 VS 2017 在 asp .net 解決方案中使用 vue-multiselect 標記？

Question

我正在嘗試使用 vue-multiselect 標記，但我遇到了一些錯誤，例如：

“vue.js:634 [Vue 警告]：未知的自定義元素：-您是否正確注冊了組件？對於遞歸組件，請確保提供“名稱”選項。”

和：

“語法錯誤：請求的模塊‘ https://unpkg.com/vue-multiselect@2.1.0 ’不提供名為‘默認’的導出”

任何人都可以幫助我嗎？

我的腳本：

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

Answer 1

我認為使用支持標記的自定義控件（如 vue-multiselect）是您正在尋找的。 見這里。

Answer 2

要呈現“出口商”列表，您必須將 select 選項設置為動態。 根據 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來顯示或隱藏輸入。

Answer 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