我是 Laravel 和 Vue 的新手,需要帮助实现 Vue-Multiselect。
我不知道如何将实际选项传递给选择。
我的vue文件:
<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>
我的 Blade 文件:
<div class="form-group">
<drop-down
:options="{{ $members->list }}"
:selected.sync="selected"
:show-label="false"
></drop-down>
</div>
在我的 Controller 方法中,我尝试了一些事情:
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'));
}
我遇到了这个错误: [Vue 警告]:无效 Prop : Prop “选项”的类型检查失败。预期数组,得到对象。 (在组件中找到:)。
2.我试过:
$members = Member::orderBy('member_first_name')->pluck('member_first_name', member_id');
$members_list = $members->all();
return view('businesses.edit', compact('members_list'));
我遇到了这个错误: htmlspecialchars() 期望参数 1 为字符串,数组给定( 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;
}
我收到此错误:htmlspecialchars() 期望参数 1 为字符串,给定数组( View :C:\wamp\www\ccf.local\resources\views\businesses\edit.blade.php)
所以我需要两件事的帮助:
- 如何将 $members_list 作为选项发送
如何组合 member_first_name 和 member_last_name 字段以便获得如下选项:
选项值="member_id" 选项文本 = member_first_name member_last_name
谢谢
最佳答案
当在 laravel {{ }}
中使用 prop 绑定(bind)时,尝试输出变量的转义形式。
您需要的是一个 javascript 数组。如果 $members_list
返回一个集合,这似乎由您的其他代码指示,请尝试
<drop-down
:options="{{ $members_list->toJson() }}"
:selected.sync="selected"
:show-label="false"
></drop-down>
至于你的 Controller ,这会有所帮助
$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
];
}
);
当您转换为 Json 时,Laravel Collections 有很多帮助操作数据的函数将您的成员数组映射到 { value: "", label: ""}
的结构。
最后不要忘记在 vue 中设置你的 prop 绑定(bind)。
props: {
options: {
type: Array,
default: function() {
return [];
}
},...
}
这应该让你继续。
关于laravel-5 - 使用 Laravel 5.3 的 Vue 多选,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39792864/