如何在 v-select 中调用 select 离子变化的函数?
How to call a function on selection change in v-select?
我目前正在研究 Vuetify,尝试使用 HTML 从 v-select 调用 Vue.js
中的方法。但是 @change 事件没有正确地 selecting 条件。
<v-layout row wrap>
<v-flex xs12 sm4>
<!-- DropDown Combo -->
<v-select v-model="selected"
:items='dropdown_tables'
append-icon='fa-angle-down'
label='Select'
persistent-hint
return-object
single-line
@change='RefreshGrid'
target='#dropdown'>
</v-select>
<!-- <p> {{`${selected}`}} </p> // this code gives the selected combo text -->
</v-flex>
</v-layout>
</v-container>
我的Javascript函数
methods: {
RefreshGrid: function () {
let cName;
if (this.selected === 'Business Area') {
cName = 'businessArea';
} else if (this.selected === 'Council') {
cName = 'council';
}
let obj = {
vm: this,
collectionName: cName,
action: 'masterData/setMasterData',
mutation: 'setMasterData'
};
this.$store.dispatch(obj.action, obj);
}
因此,当我使用 on change 并单击 council 时,它会在网格中显示 businessArea 数据,反之亦然。试图弄清楚 v-select 的索引是如何工作的。
因此,使用 @input
而不是 @change
效果很好。
我目前正在研究 Vuetify,尝试使用 HTML 从 v-select 调用 Vue.js
中的方法。但是 @change 事件没有正确地 selecting 条件。
<v-layout row wrap>
<v-flex xs12 sm4>
<!-- DropDown Combo -->
<v-select v-model="selected"
:items='dropdown_tables'
append-icon='fa-angle-down'
label='Select'
persistent-hint
return-object
single-line
@change='RefreshGrid'
target='#dropdown'>
</v-select>
<!-- <p> {{`${selected}`}} </p> // this code gives the selected combo text -->
</v-flex>
</v-layout>
</v-container>
我的Javascript函数
methods: {
RefreshGrid: function () {
let cName;
if (this.selected === 'Business Area') {
cName = 'businessArea';
} else if (this.selected === 'Council') {
cName = 'council';
}
let obj = {
vm: this,
collectionName: cName,
action: 'masterData/setMasterData',
mutation: 'setMasterData'
};
this.$store.dispatch(obj.action, obj);
}
因此,当我使用 on change 并单击 council 时,它会在网格中显示 businessArea 数据,反之亦然。试图弄清楚 v-select 的索引是如何工作的。
因此,使用 @input
而不是 @change
效果很好。