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'],
    }
}

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

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

当焦点位于组件中时，它仅显示带有一些项目符号列表的输入字段，其中带有选项的数组的元素是

。

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

非常感谢大家。

Answer 1

我注意到您包括了b行部分，这让我知道您拥有Bootstrap Vue，考虑到您拥有整个库并包括所有CSS（它甚至可能包含自己的multiselect组件或使用select2）。这两个样式表很可能彼此混乱，或者一个样式表导致另一个样式表无法正确或在正确的时间初始化。

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

此外，我会在一分钟之内摆脱掉该页面上的所有其他Vue组件，并完全根据其文档自行加载Vue Multiselect。这样一来，您就可以解决启动Vue multiselect时另一个Vue组件或Laravel /之间存在冲突的问题。

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

我制作了自己的Vue组件作为multiselect的包装，这使我可以将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'

Laravel上的Vue-Multiselect组件怪异行为

2 个答案: