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

【问题标题】：Vue-Multiselect looks like zero width text input and has no stylingVue-Multiselect 看起来像零宽度文本输入并且没有样式
【发布时间】：2019-12-30 03:09:33
【问题描述】：

我正在尝试弄清楚如何在 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'],
    }
}

不过，我得到的是一个像这样的奇怪组件

This is how it looks when the focus is not in the component

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

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

非常感谢大家。

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

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

我在这里发现了这个问题，它似乎可以帮助您检查样式。 https://github.com/shentao/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 的范围将有助于其他事情不会影响您的样式。

【讨论】：

【解决方案2】：

问题是由于组件导入语句错误造成的。

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

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

【讨论】：