Vue-Multiselect with Laravel 5.3

Question

私は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> 

マイブレードファイル：私のコントローラメソッドで

<div class="form-group"> 
    <drop-down 
     :options="{{ $members->list }}" 
     :selected.sync="selected" 
     :show-label="false" 
    ></drop-down> 
</div> 

私はいくつかのことを試してみました：

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')); 
} 

Iこのエラーが発生しました： [Vue warn]：無効な小道具：小道具の「オプション」のタイプチェックが失敗しました。予想される配列、オブジェクトを取得します。 （コンポーネント内にあります）。

2.Iは試してみました：

$members = Member::orderBy('member_first_name')->pluck('member_first_name', member_id'); 
$members_list = $members->all(); 
return view('businesses.edit', compact('members_list')); 

私はこのエラーを得た：C： はhtmlspecialchars（）は、パラメータ1は、文字列、配列を指定して、（見ることを期待\ WAMP \ WWW \ ccf.local \リソース\企業\ 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; 
     } 

私はこのエラーを得た：C：\ WAMP \ WWW \はhtmlspecialchars（）は、配列（ビュー与えられ、パラメータ1が文字列であることを期待しますccf.local \ resources私はmember_first_nameとmember_last_nameを組み合わせることができますどのようなオプションとして

を$のmembers_listを送信するためにどのように

1. ：だから私は2つのことを支援企業\ edit.blade.php \ \ビュー）

   が必要フィールドには、私はこのようなオプションを取得することができます

   オプション値= "MEMBER_ID" オプションのテキスト= member_first_nameのmember_last_nameを

ありがとうございます

Answer 1

laravel内のpropバインディングを使用している場合、{{ }}はエスケープされた変数の形式を出力しようとします。

必要なものはjavascript配列です。 $members_listがあなたの他のコードによって示されているように見えるのコレクションを返す場合、これは

$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 
     ]; 
    } 
); 

Laravelコレクションを操作するために役立つ機能の良い選択をしているのに役立ちますあなたのコントローラのよう

<drop-down 
    :options="{{ $members_list->toJson() }}" 
    :selected.sync="selected" 
    :show-label="false" 
></drop-down> 

を試してみてくださいデータは、Jsonに変換するときにメンバ配列を{ value: "", label: "" }の構造にマップします。

最後に、vueにプロップバインディングを設定することを忘れないでください。

props: { 
    options: { 
     type: Array, 
     default: function() { 
      return []; 
     } 
    },... 
} 

これはあなたに行くはずです。