selectize.js和vue.js 2 ajax加載optons

Question

我使用vuejs@2.3.3，selectize@0.12.4，vue2-selectize。 我有一個很大的形式與幾個選擇輸入。 所有選項都通過AJAX加載到一個屬性，它是通過AJAX數據被替換之前與演示數據初始化：

addTrackData : { 

    styles : [ 
     { id: 1, title: 'style 1' }, 
     { id: 2, title: 'style 3' }, 
     { id: 3, title: 'style 2' }, 
    ], 
    authors: [ 
     {inn: '111', name: 'demo 1'}, 
     {inn: '222', name: 'demo 2'}, 
     {inn: '333', name: 'demo 3'} 
    ] 
    .... 
}, 

而且我有2個問題：

1）如果我使用在這樣的設置，選擇不加載在所有：

<selectize v-model="form.data.authors[i]['id']" :settings="selectize.authors"></selectize> 

selectize: { 
    authors: { 
     valueField: 'inn', 
     labelField: 'name', 
     searchField: ['name', 'inn'], 
     options: this.addTrackData.authors // that doesn't works, but hard coded array works 
    } 
} 

由於錯誤Error in data(): "TypeError: Cannot read property 'authors' of undefined"的。 this.addTrackData.authors和addTrackData.authors都出現此錯誤。

但這樣工作的：

<selectize v-model="form.data.authors[i]['id']" 
    :settings=" { 
     valueField: 'inn', 
     labelField: 'name', 
     searchField: ['name', 'inn'], 
     options: addTrackData.authors, // It works, but looks too ugly! 
    }" > 
</selectize> 

2）選項不具反應 - 當AJAX數據到來時，所有的選擇元素仍然顯示了一個演示數據。我不知道如何更新他們... ...

UPDATE

問題二可以固定如果條件和空初始數組：

<selectize v-if="addTrackData.authors.length" v-model="form.data.authors[i]['id']" 
    :settings=" { 
     valueField: 'inn', 
     labelField: 'name', 
     searchField: ['name', 'inn'], 
     options: addTrackData.authors, // It works, but looks too ugly! 
    }" > 
</selectize> 

addTrackData : { 
    styles : [], 
    authors: [] 
    .... 
} 

但第一個問題還是讓我哭泣

Answer 1

我剛剛讀了vue2-selectize的源代碼，並注意到它的手錶代碼爲options，密鑰不正確。

他的代碼是這樣：

watch: { 
    value() { 
    this.setValue() 
    }, 
    options (value, old) { 
    if (this.$el.selectize && !equal(value, old)) { 
     this.$el.selectize.clearOptions() 
     this.$el.selectize.addOption(this.current) 
     this.$el.selectize.refreshOptions(false) 
     this.setValue() 
    } 
    } 
}, 

，而應該是這樣工作的：

watch: { 
    value() { 
    this.setValue() 
    }, 
    options (value, old) { 
    if (this.$el.selectize && !equal(value, old)) { 
     this.$el.selectize.clear(); 
     this.$el.selectize.clearOptions(); 
     var vm = this; 
     this.$el.selectize.load(function(callback) { 
     callback(vm.current); 
     }); 
     this.$el.selectize.refreshOptions(false); 
     this.setValue(); 
    } 
    } 
}, 

我只準備了哈克的方式，使其工作，但我不建議你使用它在生產中。

這裏是小提琴的鏈接：https://jsfiddle.net/ahmadm/h8p97hm7/

我會盡力盡快發送pull請求，他的創造者儘可能但直到那個時候，您的解決方案已經是唯一可能的解決方案。