Vue-Multiselectが空です。 - Laravel Spark

Question

私は最新のVue-Multiselectを実装しており、ページ内でレンダリングしています。何らかの理由でv-modelの値が空になっても有効ではないようです。

import { Multiselect } from 'vue-multiselect' 

var MultiSelect = Vue.extend({ 
components: { Multiselect }, 
template: '<div><multiselect :options="options" :multiple="true" :close-on-select="false" :clear-on-select="false" :hide-selected="true" placeholder="Please select..." label="name" track-by="name"></multiselect></div>', 
    data: function() { 
     return { 
      value: [], 
      options: [] 
     }; 
    } 
}); 

Vue.component('multi-select', MultiSelect); 

Iは例に従って、すべてのオプションを設定している：に

<multi-select v-model="updateTutorInstrumentsForm.options" group-values="libs" group-label="language"></multi-select> 

    <pre>@{{ updateTutorInstrumentsForm.options }}</pre> 

ビット混乱：

options: [ 
       { 
        language: 'Javascript', 
        libs: [ 
         { name: 'Vue.js', category: 'Front-end' }, 
         { name: 'Adonis', category: 'Backend' } 
        ] 
       }, 
       { 
        language: 'Ruby', 
        libs: [ 
         { name: 'Rails', category: 'Backend' }, 
         { name: 'Sinatra', category: 'Backend' } 
        ] 
       }, 
       { 
        language: 'Other', 
        libs: [ 
         { name: 'Laravel', category: 'Backend' }, 
         { name: 'Phoenix', category: 'Backend' } 
        ] 
       } 
      ], 

これはブレードのコードであります少なくとも言いなさい！

Answer 1

私はこれを解決することができました。複数選択をカプセル化についてのジャスティンさんのコメントに

おかげで、私はそれを破ることを決定し、次のことをやった：

import { Multiselect } from 'vue-multiselect' 

var CustomSelect = Vue.extend({ 
components: { Multiselect }, 
template: '<div><multiselect :multiple="true" :selected="selected" :options="options" group-values="instruments" group-label="name" track-by="name" label="name"></multiselect></div>', 

created() { 
    this.getInstruments(); 
}, 

data: function() { 
    return { 
     selected: null, 
     options: [] 
    }; 
}, 

methods: { 
    getInstruments() { 
     this.$http.get('/get/instruments') 
      .then(response => { 
       this.instruments = response.data; 
       this.updateInstruments(); 
      }); 
    }, 

    updateInstruments() { 
     this.options = this.instruments; 
    }, 
} 
}); 

Vue.component('customselect', CustomSelect); 

は、単に刃テンプレート、中：<customselect></customselect>