Javascript 在vuetify中选择删除时v-autocomplete
vuetify中的v-autocomplete中是否有任何on-select、on-remove属性?我想手动处理这些事件。我尝试了@change,但在这种情况下,我不知道添加/删除了哪一个Javascript 在vuetify中选择删除时v-autocomplete,javascript,vue.js,vuetify.js,Javascript,Vue.js,Vuetify.js,vuetify中的v-autocomplete中是否有任何on-select、on-remove属性?我想手动处理这些事件。我尝试了@change,但在这种情况下,我不知道添加/删除了哪一个 <v-autocomplete :items="states" item-text="name" label="State" @change="pushOrRemoveStates()" multiple ></v-autocomplete&
<v-autocomplete
:items="states"
item-text="name"
label="State"
@change="pushOrRemoveStates()"
multiple
></v-autocomplete>
在@change中,我调用方法pushOrRemoveStates。我可以在autocomplete中选择多个选项,因此在这里我想处理选项的onSelect和onRemove,一旦我们选择/删除选项,我必须执行一些操作。使用@change是不可能的,因为我不知道天气选项是否被选中或删除,因为在这两种情况下@change都将执行。尝试观看自动完成的模型
watch:{
model(val,oldval) {
//watch you code here
}
}
//link model as v-model
<v-autocomplete
v-model="model"
>
观察:{
模型(val,旧val){
//注意这里的代码
}
}
//链接模型为v型
要知道发生了什么变化,您必须声明一个v-model
。这个v型模型是反应型的,因此您可以在同一个平台上观察变化
由于自动完成是多个,请将v-model
声明为array
类型
new Vue({
el: '#app',
data () {
return {
states: [
'Alabama',
'Alaska',
'American Samoa',
'Arizona'
],
selected:['Alabama', 'Alaska'] // this is your v-model. and you watch any change to this.
}
},
watch: {
selected (newSelectedArray, oldSelectedArray) {
console.log(newSelectedArray);
console.log(oldSelectedArray);
// so now comparing your old to new array you would know if a state got
// added or removed, and fire subsequent methods accordingly.
}
})
<v-autocomplete
:items="states"
v-model="selected"
item-text="name"
label="State"
@change="pushOrRemoveStates()"
newvue({
el:“#应用程序”,
数据(){
返回{
国家:[
“阿拉巴马州”,
“阿拉斯加”,
“美属萨摩亚”,
“亚利桑那州”
],
所选:['Alabama','Alaska']//这是您的v型车。您可以查看对此的任何更改。
}
},
观察:{
选定(新选定阵列、旧选定阵列){
控制台日志(newSelectedArray);
console.log(旧的SelectedArray);
//因此,现在比较新旧阵列,就可以知道状态
//添加或删除,并相应地激发后续方法。
}
})
请添加一些代码片段。他们,我更新了问题,请检查。我需要在vuetify Any think like@select
@remove
for v-autocomplete或v-combobox中添加类似的内容。只需查看源代码,找不到类似的内容。在更改发生之前,您只能保留一份值的副本,在ange,比较两个版本。也许还可以在他们的问题跟踪程序中请求它作为新功能?