2016-10-10 38 views
0

我想實現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實例上不存在的「已選」路徑。考慮使用「數據」選項對屬性進行預初始化,以獲得更可靠的反應性和更好的性能。

我錯過了什麼?

回答

0

Typo可能會導致問題?

:seleted="multiValue" 

應該是:選擇= 「多值」

順便說一句:選擇在2.0版已棄用。 :價值已經佔據了它的位置。

0

我認爲這是因爲沒有在您的組件被稱爲「多值」的變量。 在:入圍= 「多值」,使用變量 「選項」 而不是 「多值