Vue-Multiselect выглядит как ввод текста нулевой ширины и не имеет стиля
Я пытаюсь понять, как настроить компонент Vue-multiselect на Laravel 5. До сих пор у меня есть компонент с именем 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 или что-то в этом роде, но вроде все в порядке, за исключением этой части, мой компонент, похоже, не загружает какой-либо стиль.
Всем большое спасибо.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Я заметил, что вы включили часть b-row, которая сообщает мне, что у вас есть Bootstrap Vue, учитывая, что у вас есть вся эта библиотека и весь ее CSS (он может даже содержать собственный компонент с множественным выбором или использовать select2). Скорее всего, две таблицы стилей мешают друг другу или одна из них приводит к тому, что другая не запускается правильно или в нужное время.
Я обнаружил здесь эту проблему, которая, похоже, может помочь вам в проверке стиля. https://github.com/shentao/vue-multiselect/issues/718
Также я бы избавился от всех остальных компонентов Vue с этой страницы на минуту и загрузил бы Vue Multiselect отдельно в соответствии с их документацией. Это позволит вам сузить его до проблемы, связанной с конфликтом между другим компонентом Vue или Laravel /, когда вы запускаете Vue multiselect.
Я использую его в проекте 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, как это сделал я, поможет другим вещам не вмешиваться в ваш стиль.
Проблема возникает из-за неправильного оператора импорта компонента.
В моем случае следующее утверждение дало правильное поведение:
import Multiselect from 'vue-multiselect/src/Multiselect'