我想實現VUE,多選(1.1.3版本)與Laravel 5.Laravel VUE,多選的錯誤
在我的VUE文件我有這樣的代碼:
<template>
<div class="dropdown">
<multiselect
:seleted="multiValue"
:show-labels="false"
:options="options"
:placeholder="placeholder"
:searchable="true"
:allow-empty="false"
:multiple="true"
key="name"
label="name"
@update="updateSelected"
></multiselect>
<label v-show="showLabel" for="multiselect"><span></span>Language</label>
</div>
</template>
<script>
import { Multiselect } from 'vue-multiselect';
export default {
components: { Multiselect },
props: {
selected: null,
options: {
type: Array, default: function() {
return []
}
},
placeholder: 'Select...'
},
methods: {
updateSelected (newSelected) {
this.selected = newSelected
}
}
}
</script>
在我的刀片文件:
<div class="form-group">
<drop-down
:options="{{ $members_list->toJson() }}"
></drop-down>
</div>
在我的控制器:
$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
];
}
);
當我運行頁面時,我得到一個包含所有成員的選擇列表,但是當我嘗試選擇一個列表時,它會變成紅色,它將被添加到頂部的選定列表中,但我無法選擇更多選項,並且在螢火蟲中我得到此錯誤: [Vue警告]:您正在設置一個vm實例上不存在的「已選」路徑。考慮使用「數據」選項對屬性進行預初始化,以獲得更可靠的反應性和更好的性能。
我錯過了什麼?