Support the ongoing development of Laravel.io →
Views Blade Forms
Last updated 1 year ago.
0

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>
Last updated 7 years ago.
0

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-wi...

Maybe you can help me?

Thank you, Sigal

0

Sign in to participate in this thread!

Eventy

Your banner here too?

securit securit Joined 9 May 2014

Moderators

We'd like to thank these amazing companies for supporting us

Your logo here?

Laravel.io

The Laravel portal for problem solving, knowledge sharing and community building.

© 2024 Laravel.io - All rights reserved.