[英]Is there a way to get the index of a selected v-select option in Vuetify?
I'm new to Vuetify and am having some trouble retrieving the index of a selected option on the v-select component.我是 Vuetify 的新手,在检索 v-select 组件上选定选项的索引时遇到了一些问题。
Once I have the index, I'd like to populate a text field based on the option clicked.获得索引后,我想根据单击的选项填充文本字段。
I have an array of objects that I'm retrieving from firebase and passing in as the :items
prop.我有一组对象,我正在从 firebase 中检索这些对象并作为
:items
道具传入。
I can successfully get the index using a standard select
option with v-for to loop through the array, then use @change
to call a function that uses the event object to get the selectedIndex.我可以使用带有 v-for 的标准
select
选项成功获取索引以循环遍历数组,然后使用@change
调用使用事件对象获取 selectedIndex 的函数。 However, I can't seem to figure it out when trying to use the v-select component但是,在尝试使用 v-select 组件时,我似乎无法弄清楚
This works:这有效:
<select @change="populateLicense" v-model="trim.shop">
<option value="">Select Shop</option>
<option v-for="item in shopdata" :key="item.id">
{{ item.shopname}}
</option>
</select>
Methods:方法:
populateLicense(e) {
let index = e.target.selectedIndex - 1
this.trim.license = this.shopdata[index].license
},
Current v-select component (Not working):当前 v-select 组件(不工作):
<v-select
outline
label="Select Shop"
:items="shopdata"
item-text="shopname"
item-value=""
v-model="trim.shop"
@change="populateLicense"
>
</v-select>
I'm guessing the item-value
might provide what I need, but I'm not sure what I'm supposed to assign to it我猜
item-value
可能提供我需要的东西,但我不确定我应该分配给它什么
Any help is greatly appreciated, thanks!非常感谢任何帮助,谢谢!
Was able to solve it after looking at vuetify docs again.再次查看 vuetify 文档后能够解决它。 Passing the
return-object
prop was the key.传递
return-object
道具是关键。
Updated code for anyone who may have a similar problem!为可能有类似问题的任何人更新代码!
v-select: v-选择:
<v-select
outline
label="Select Shop"
:items="shopdata"
item-text="shopname"
v-model="trim.shop"
return-object
@change="populateLicense(trim.shop.license)"
>
</v-select>
Methods:方法:
methods: {
populateLicense(license) {
this.trim.license = license
}
}
this.shopdata.findIndex(data => data === this.trim.shop)
remove消除
item-text="shopname"
item-value=""
You can set id in your v-select
... And do this: document.getElementById("mySelect").selectedIndex
您可以在
v-select
设置 id ... 并执行以下操作: document.getElementById("mySelect").selectedIndex
Is it what you need?这是你需要的吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.