我正在使用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
元素更改时运行。