如何通过单击图像 Vuetify 以编程方式下拉选择菜单? [英] How to drop down programmatically a select menu by clicking on image Vuetify?
本文介绍了如何通过单击图像 Vuetify 以编程方式下拉选择菜单?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有我的图像属性并在模板中选择:
<v-img src='/logos/some.jpg'@click='click_select'/>
在方法中,我有方法:
click_select(){this.$refs.select.onClick;}
点击图片不做任何事情,也没有错误日志
解决方案
只需为该事件添加一个回调处理程序,例如:
this.$refs.select.onClick((e) => {});
完整示例
var app = new Vue({el: '#app',vuetify: 新的 Vuetify(),数据: {货币选择:['a', 'b', 'c']},方法: {click_select() {this.$refs.select.onClick((e) => {});}}})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"><link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet"><link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script><div id="应用程序"><v-app id="inspire"><button @click='click_select' class="v-btn-primary">选择按钮><v-select :items="currencySelect" ref='select'/></v-app>
I have my image property and select in template:
<v-img src='/logos/some.jpg'
@click='click_select'/>
<v-select :items="currencySelect"
ref='select'/>
and in methods, I have method:
click_select(){
this.$refs.select.onClick;
}
Clicking on image doesn't do anything and no errors logs
解决方案
Just add a callback handler for that event like :
this.$refs.select.onClick((e) => {
});
Full example
var app = new Vue({
el: '#app',
vuetify: new Vuetify(),
data: {
currencySelect: ['a', 'b', 'c']
},
methods: {
click_select() {
this.$refs.select.onClick((e) => {
});
}
}
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="app">
<v-app id="inspire">
<button @click='click_select' class="v-btn-primary">
select
</button>
<v-select :items="currencySelect" ref='select' />
</v-app>
</div>
这篇关于如何通过单击图像 Vuetify 以编程方式下拉选择菜单?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文