Vue-MultiselectとLaravel 5.3のオプションがJSON要素として表示されます

Question

私はLaravel 5.3アプリを持っており、multipleを表示するためにvue-multiselect（Version 2.0.0-beta13）を使用しています。 selectのオプションは、AJAX GET呼び出しを介して特定のルートに読み込まれます（読みやすくするために短縮されています）。

[ 
    { 
     "address1": "-", 
     "address2": "-", 
     "city": "-", 
     "company": "-", 
     "id": 0 
    }, 
    { 
     "address1": "Adresse 1 und so", 
     "address2": "", 
     "city": "Wien", 
     "company": "Abernathy company", 
     "id": 27 
    } 
] 

これは有効なjsonと思われます。これは、Chromeのネットワークタブですべての設定を確認するとうまくいくようです。

私はVueのコンポーネントでこのコードを持っている：

<multiselect 
    v-model="companyIDs" 
    :allow-empty="true" 
    :value="selected" 
    :multiple="true" 
    :close-on-select="false" 
    :label="company" 
    :track-by="id" 
    :options="companies" 
> 
</multiselect> 

そして、これはオプション（companies）が選択に示されている取得する方法のscreenhsotです：

ここで間違っているのですか？

Answer 1

あなただけ動作するはずです以下、あなたのコードから2 :を削除する必要があります。

<multiselect 
    v-model="companyIDs" 
    :allow-empty="true" 
    :value="selected" 
    :multiple="true" 
    :close-on-select="false" 
    label="company" 
    track-by="id" 
    :options="companies" 
> 

あなたが属性の前に:を追加すると：それはv-bindためshortcutで、VUEは、代わりにそのVUEとしてdata変数を期待して開始します単純な文字列の。あなたはそれが普通の文字列であり、変数ではないと思っているようです。そのエラーの根本的な原因です。

Answer 2

optionsは、API応答として受け取ったオブジェクトの配列全体であると仮定します。会社名だけを表示する場合は、値として使用する前にそれらを選択する必要があります。しかし、これは扱いにくく、幸運にも、Vue-Multiselectの作者はそれを考えているので、オブジェクトの配列（documentation）を使用する機能が追加されています。 2つのオプションは、labelとtrack-byです。あなたがしたのはuse :track-byと:labelです。これは同じものではなく、したがってライブラリによって認識されません。

また、正確に何を表示しようとしているのか説明していないので、リスト内のオブジェクトごとにobject[i].companyと表示したいと仮定しています。この場合、label="company"とtrack-by="id"をコンポーネントマークアップに追加できます。

UIオプションとして表示するロジックがもっと複​​雑な場合は、API応答として受け取ったオブジェクトの配列を、ユーザーに表示する文字列の配列にマップする必要があります。