CODEWITHSUNDEEP
laravel-5vue.js
user2730676
user2730676

Reputation: 21

vue-multiselect in laravel not work

I am new to vue. I am using vue-multiselect in Laravel, and could not make it work. Could anyone give me some suggestions?

My app.js is:

Vue.component('multiselect', require('./components/DropDown.vue'));
const app = new Vue({
    el: '#app'
});

My DropDown.vue is:

<template>
<div>
    <multiselect
        v-model="multiValue"
        :options="options"
        :multiple="true"
        :close-on-select="true"
        placeholder="Pick some"
        label="name"
        track-by="name"
    ></multiselect>
</div>
</template>

<script>
import Multiselect from 'vue-multiselect';
export default {
    components: { Multiselect },
    data () {
        return {
            selected: null,
            options: []
        }
    }        
};
</script>
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

The code in my blade is:

<div id="app">
<label class="typo__label">--Select--</label>
<multiselect
    v-model="selected"
    :options= "{!! $d !!}"
    :multiple="true"
    placeholder="Select Some"
    :close-on-select="false" 
    :clear-on-select="false" 
    :hide-selected="true" 
    :preserve-search="true"
    label="name" 
    track-by="name" 
    :preselect-first="true"></multiselect>
</div>

And the input $d is an array:

[{"id":1,"name":"Face-to-face"},{"id":2,"name":"Online"},{"id":3,"name":"Webinar"},{"id":4,"name":"Video-Conferencing"}]

Instead of showing the drop down multiselect, the first array is chopped of the id, and the output looks like below:

--Select-- ":1,"name":"face-to-face"},{"id":2,"name":"online"},{"id":3,"name":"webinar"},{"id":4,"name":"video-conferencing"}]"="" :multiple="true" placeholder="Select Some" :close-on-select="false" :clear-on-select="false" :hide-selected="true" :preserve-search="true" label="name" track-by="name" :preselect-first="true">

Your help will be highly appreciated!

Upvotes: 0

Views: 1277

Answers (1)

user2730676
user2730676

Reputation: 21

I finally make it work by editing the webpack.mix.js file:

let mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.copy('node_modules/vue-multiselect/dist/vue-multiselect.min.css', 'public/css/vue-multiselect.min.css')
.copy('node_modules/vue-multiselect/dist/vue-multiselect.min.js', 'public/js/vue-multiselect.min.js');

Upvotes: 1

Related Questions