Vue-Multiselect 看起来像零宽度文本输入并且没有样式

Question

我试图弄清楚如何在 Laravel 5 上设置 Vue-multiselect 组件。到目前为止，我有一个名为 register.vue 的组件，这是我需要该组件的代码部分（我不会放这里的所有代码，因为它太大了。

<b-row align-v="center">
    <multiselect
         v-model="selected"
         :options="options">
    </multiselect>
</b-row>

这是我在脚本部分包含组件的地方

import Multiselect from 'vue-multiselect';

   export default {
    components: { Multiselect },
    data(){
        return {
            selected: null,
            options: ['list', 'of', 'options'],
    }
}

尽管如此，我得到的是一个像这样的奇怪组件

这是焦点不在组件中时的样子

当焦点在组件中时，它只显示一个带有一些项目符号列表的输入字段，其中包含选项的数组元素。

有人知道我的应用程序发生了什么吗？ 我已经花了很多时间检查是否有一些遗漏的 css 文件或类似的东西，但一切似乎都很好，除了那部分，我的组件似乎没有加载任何样式。

非常感谢大家。

Answer 1

我注意到你包含了 b-row 部分，它让我知道你有 Bootstrap Vue，考虑到你拥有整个库和所有的 CSS（它甚至可能包含它自己的多选组件或使用 select2）。 这两个样式表很可能相互混淆，或者一个导致另一个没有正确或在适当的时间初始化。

我在这里发现了这个问题，它似乎可以帮助您检查样式。 https://github.com/sentao/vue-multiselect/issues/718

此外，我会在一分钟内摆脱该页面上的所有其他 Vue 组件，并根据他们的文档自行加载 Vue Multiselect。 这将让您将问题缩小到另一个 Vue 组件或 Laravel 之间的冲突/当您启动 Vue 多选时。

我目前在 PHP / Vue 项目中使用它，这是我使用 Buefy 框架的工作设置。

我制作了自己的 Vue 组件作为多选的包装器，这让我可以将 CSS 范围限定为特定的 HTML。

 <template>
  <multiselect
    v-model="value"
    :options="options"
    :placeholder="placeholder"
    label="label"
    track-by="value"
    @input="inputChanged" />
</template>

<script>
import Multiselect from 'vue-multiselect';

export default {
    components: { Multiselect },
    props: {
        options: {
            type: [Array],
            default() {
                return [];
            }
        },

        savedValue: {
            type: [Array],
            default() {
                return [];
            }
        },

        placeholder: {
            type: [String],
            default: 'Select Option...'
        }
    },

    data() {
        return {
            value: null
        };
    },

    mounted() {
        this.value = this.savedValue;
    },

    methods: {
        inputChanged(selected) {
            this.$emit('selected', selected.value);
        }
    }
};
</script>

<style scoped>
@import '../../../../../node_modules/vue-multiselect/dist/vue-multiselect.min.css';
</style>

然后你可以从另一个文件中调用组件，就像这样。

<select-input
:saved-value="artistSelected"
:options="artistOptions"
:placeholder="'Choose an existing artist...'"
@selected="artistChanged"
/>

像我一样定义 CSS 的范围将有助于其他事情不会弄乱您的样式。

Answer 2

出现问题的原因是错误的组件导入语句。

就我而言，以下语句给出了正确的行为：

import Multiselect from 'vue-multiselect/src/Multiselect'