时间戳

首页 > 解决方案 > Vue-Multiselect 看起来像零宽度文本输入并且没有样式

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

问题描述

我试图弄清楚如何在 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 文件或类似的东西，但一切似乎都很好，除了那部分，我的组件似乎没有加载任何样式。

非常感谢大家。

标签： javascriptvue.js

解决方案

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

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

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

推荐阅读