javascript - selectize.js 和 vue.js 2 ajax 加载选项

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'}
    ]
    ....
},

我有两个问题:

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: []
    ....
}

但是第一个问题还是让我哭了

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();
    }
  }
},

我只是准备了一种巧妙的方法来使其发挥作用，但我不鼓励您在生产中使用它。

这是 fiddle 的链接:https://jsfiddle.net/ahmadm/h8p97hm7/

我会尝试尽快向他的创建者发送拉取请求，但在那之前，您的解决方案已经是唯一可能的解决方案。