laravel中的vue-multiselect不起作用答案

【问题标题】：vue-multiselect in laravel not worklaravel中的vue-multiselect不起作用
【发布时间】：2019-01-20 12:54:15
【问题描述】：

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

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

【问题讨论】：

标签： laravel-5 vue.js

【解决方案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');

【讨论】：