我正在使用 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'}
]
....
},
我有两个问题:
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
}
}
由于错误 data() 中的错误:“TypeError: 无法读取未定义的属性‘authors’”
。
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) 选项不是响应式(Reactive)的 - 当 ajax 数据到来时,所有选择元素仍然显示演示数据。我不知道如何更新它们......
更新
第二个问题可以通过 If Conditional 和空初始数组来解决:
<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: []
....
}
但是第一个问题还是让我哭了
最佳答案
我刚刚阅读了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();
}
}
},
我只是准备了一种巧妙的方法来使其发挥作用,但我不鼓励您在生产中使用它。
这是 fiddle 的链接:https://jsfiddle.net/ahmadm/h8p97hm7/
我会尝试尽快向他的创建者发送拉取请求,但在那之前,您的解决方案已经是唯一可能的解决方案。
关于javascript - selectize.js 和 vue.js 2 ajax 加载选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44812219/