Bra*_*Ore 3 javascript vue.js vuetify.js
我是 Vuetify 的新手,在检索 v-select 组件上选定选项的索引时遇到了一些问题。
获得索引后,我想根据单击的选项填充文本字段。
我有一组对象,我正在从 firebase 中检索这些对象并作为:items道具传入。
我可以使用select带有 v-for的标准选项成功获取索引以循环遍历数组,然后使用@change来调用使用事件对象获取 selectedIndex 的函数。但是,在尝试使用 v-select 组件时,我似乎无法弄清楚
这有效:
<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>
Run Code Online (Sandbox Code Playgroud)
方法:
populateLicense(e) {
let index = e.target.selectedIndex - 1
this.trim.license = this.shopdata[index].license
},
Run Code Online (Sandbox Code Playgroud)
当前 v-select 组件(不工作):
<v-select
outline
label="Select Shop"
:items="shopdata"
item-text="shopname"
item-value=""
v-model="trim.shop"
@change="populateLicense"
>
</v-select>
Run Code Online (Sandbox Code Playgroud)
我猜它item-value可能会提供我需要的东西,但我不确定我应该分配给它什么
非常感谢任何帮助,谢谢!
再次查看 vuetify 文档后能够解决它。传递return-object道具是关键。
为可能有类似问题的任何人更新代码!
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>
Run Code Online (Sandbox Code Playgroud)
方法:
methods: {
populateLicense(license) {
this.trim.license = license
}
}
Run Code Online (Sandbox Code Playgroud)
Vic*_*ban -1
您可以在v-select...中设置 id 并执行以下操作:
document.getElementById("mySelect").selectedIndex
这是你需要的吗?