vue-multiselect in laravel不起作用

Question

我是vue新手。我在Laravel中使用vue-multiselect，但无法使其工作。有人能给我一些建议吗？

我的app.js是：

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

我的DropDown.vue是：

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

我刀片式服务器中的代码是：

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

输入的$d是一个数组：

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

第一个数组没有显示下拉多选，而是从id中截取出来，输出如下所示：

--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">

我们将非常感谢您的帮助！

Answer 1

最后，我通过编辑webpack.mix.js文件使其正常工作：

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');