An answer for prosperity. ie I figured it out :)
In app.js I had named my component "multiselect"... so I renamed that to dropdown to avoid naming collision
// Multiselect dropdown component
import Multiselect from './components/Multiselect.vue';
Vue.component('dropdown', Multiselect);
My multiselect.vue now looks like this....
<template>
<div>
<multiselect
:selected.sync="selected"
:show-labels="false"
:options="options"
:placeholder="placeholder"
:searchable="true"
:allow-empty="false"
:multiple="true"
:limit="limit" ,
key="id" label="name"
></multiselect>
</div>
</template>
<script>
import {Multiselect} from 'vue-multiselect';
export default {
components: {Multiselect},
props: {
options: { type: Array, default: function () { return [] } },
showLabel: {type: Boolean, default: true},
multiple: {type: Boolean, default: true},
searchable: {type: Boolean, default: true},
placeholder: {default: 'Select one or more'},
limit: 2,
selected: '',
},
methods: {}
};
</script>
<style>
.multiselect, .multiselect__input, .multiselect__single {
font-size: 11px ! Important;
}
</style>
I needed to make the font a little smaller, hence the style override on the template..
Note the way that I define the array in the options. This is because I am passing back the list of options from an Ajax request. The ajax request returns an array of id (vue key) and a name (vue label) attributes. Before this inclusion I was getting a lot of errors.
app.js:26189[Vue warn]: Invalid prop: type check failed for prop "options". Expected Array, got Undefined. (found in component: <multiselect>)
My blade now includes
<dropdown
:options=observerlist
:selected=selected
:multiple=multiple
:searchable=searchable
:show-labels=false
:allow-empty=false
:close-on-select=false
:clear-on-select=false
:limit=2
placeholder="Assign to Reviewers"
label="name"
key="id"
></dropdown>
Hi, I'm stuck with Vue-Multiselect as well. I'm new to Laravel and Vue.
If you can, please look at my post here: http://stackoverflow.com/questions/39792864/vue-multiselect-with-laravel-5-3
Maybe you can help me?
Thank you, Sigal
Sign in to participate in this thread!
The Laravel portal for problem solving, knowledge sharing and community building.
The community