Vue-Multiselect with Laravel 5.3

Question

I'm new to Laravel and Vue and need help implementing Vue-Multiselect.

I don't know how to pass the actual options to the select.

My vue file:

    <template>
    <div class="dropdown">
        <multiselect
                :selected.sync="selected"
                :show-labels="false"
                :options="options"
                :placeholder="placeholder"
                :searchable="false"
                :allow-empty="false"
                :multiple="false"
                key="name"
                label="name"
        ></multiselect>
        <label v-show="showLabel" for="multiselect"><span></span>Language</label>
    </div>
</template>

<script>
    import { Multiselect } from 'vue-multiselect';

    export default {
        components: { Multiselect },

        props: {
            options: {},
            placeholder: {
                default: 'Select one'
            },
            showLabel: {
                type: Boolean,
                default: true
            },
            selected: ''
        }
    };
</script>

My blade file:

    <div class="form-group">
    <drop-down
        :options="{{ $members->list }}"
        :selected.sync="selected"
        :show-label="false"
     ></drop-down>
</div>

In my controller method I tried a few things:

1.

public function edit($id)
{
    ....
    $members_list = Member::orderBy('member_first_name')->pluck('member_first_name', member_id');
     return view('businesses.edit', compact('members_list'));
}

I got this error: [Vue warn]: Invalid prop: type check failed for prop "options". Expected Array, got Object. (found in component: ).

2.I tried:

$members = Member::orderBy('member_first_name')->pluck('member_first_name', member_id');
$members_list = $members->all();
return view('businesses.edit', compact('members_list'));

I got this error: htmlspecialchars() expects parameter 1 to be string, array given (View: C:\wamp\www\ccf.local\resources\views\businesses\edit.blade.php)

3.

$members = DB::table('members')
            ->orderBy('member_first_name', 'asc')
            ->get();
        $members_list = array();
        foreach($members as $mem) {
            $members_list[$mem->member_id] = $mem->member_first_name;
        }

I got this error: htmlspecialchars() expects parameter 1 to be string, array given (View: C:\wamp\www\ccf.local\resources\views\businesses\edit.blade.php)

So I need help with 2 things:

How to send the $members_list as the options
How can I combine the member_first_name and member_last_name fields so I can get options like this:

option value="member_id" option text = member_first_name member_last_name

Thank you

Justin MacArthur Justin MacArthur · Accepted Answer · 2016-09-30T20:51:52

When using prop binding inside of laravel {{ }} tries to output an escaped form of the variable.

what you need is a javascript array. if $members_list returns a collection, which seems to be indicated by your other code, try

<drop-down
    :options="{{ $members_list->toJson() }}"
    :selected.sync="selected"
    :show-label="false"
 ></drop-down>

as for your controller this will help

$members = DB::table('members')
        ->orderBy('member_first_name', 'asc')
        ->get();

$members_list = $members->map(
    function($member) {
        return [
            "value" => $member->member_id,
            "label" => $member->member_first_name. " ". $member->member_last_name
        ];
    }
);

Laravel Collections have a good selection of function that help to manipulate data will map your members array to the structure of { value: "", label: "" } when you convert to Json.

Lastly don't forget to set up your prop bindings in vue.

props: {
    options: {
        type: Array,
        default: function() {
            return [];
        }
    },...
}

That should get you going.

Vue-Multiselect with Laravel 5.3

1 Answers