laravel-5 - laravel中的vue-multiselect不起作用
问题描述
我是 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">
您的帮助将不胜感激!
解决方案
我终于通过编辑 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');
推荐阅读
- javascript - 在 Safari 中禁用两指滚动
- python-3.x - 异常或其他块级范围中的变量范围
- c# - SSIS WinSCP C# 脚本任务正在运行但不执行任何操作
- c# - 有没有办法在 C# .net 中将时区格式(美国/芝加哥)转换为 UTC(-0500)?
- javascript - 为什么禁用缓存会使我的网页正常工作?
- jenkins - 如何从 jenkins 管道中的 JQL 查询中提取 TestCaseID
- ag-grid - 加载的行高与 ag-grid 中的实际行高不同
- 7zip - 如何在 Windows 上提取大文件
- r - 如何整理 Cox zph(比例风险)图?
- java - 出现错误:无法确定任务“:app:installDebug”的依赖关系。在设备或模拟器上运行 react-native 时