在selectize.js select上运行以编程方式填充了选项的Vue方法?

时间:2019-06-20 23:30:07

标签: vue.js selectize.js

我正在使用selectize.js使用基于数据源的选项填充选择元素。但是,我无法在更改时让select元素触发Vue方法。

select元素填充有选项,并在页面加载时使用selectize.js正常工作。而且我已经确认,将Vue.js方法用于具有预填充选项的常规select元素时,可以按预期工作。但是,我无法在selectize.js select元素上触发Vue方法。

我的选择元素:

      <select id="race__finder" @change="findRace($event)"></select>
  // selectize setup
  $('#race__finder').selectize({
    options:[
      {class: "race", value: "4c035000-0", name: "Grand Prairie City Council - District 4"},
      {class: "candidate", value: "4c035000-1", name: "John Lopez"},
      {class: "candidate", value: "4c035000-2", name: "Richard Fregoe"},
      {class: "race", value: "7c56bc36-3", name: "Fairview Town Council - Seat 5"}
    ],
    optgroups: [
      { value: 'candidate', label: 'Candidates' },
      { value: 'race', label: 'Races' },
    ],
    optgroupField: 'class',
    labelField: 'name',
    searchField: ['name'],
    maxOptions: 5,
    maxItems: 1,
  });

  // vue setup
  const vm = new Vue({
    el: '#app',
    data() {
      return {
        races: [],
      };
    },
    methods: {
      findRace(event) {
        console.log('test');
        console.log(event.target.value);
      },
    },
  });

最终目标是能够通过select options值找到一个种族,尽管在这一点上,我只是想让console.logs在#race__finder元素更改时运行。

0 个答案:

没有答案