我有自定义文本字段,我必须集中它的功能,当对话框打开。我试着用vue.js refs
聚焦它:
代码:
<v-app id="app">
<v-row align="center">
<v-col class="text-center" cols="12">
<v-btn color="primary" @click="openDialog()">Open dialog</v-btn>
</v-col>
</v-row>
<v-dialog v-model="dialog">
<v-card>
<v-card-title
class="headline grey lighten-2"
primary-title
>
Dialog
</v-card-title>
<v-card-text>
<v-row>
<v-col cols="6" class="ml-2">
<v-text-field
ref="name"
placeholder="Enter your name..."
type="text"
solo
flat
outlined
></v-text-field>
<v-btn
color="indigo"
dark
@click = "setFocusName()"
>Set focus</v-btn>
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-dialog>
</v-app>
JavaScript:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
dialog: false
}
},
methods: {
setFocusName() {
this.$refs.name.focus();
},
openDialog() {
this.dialog = !this.dialog
this.setFocusName()
}
}
});
当我点击打开对话框按钮时,我的文本字段没有聚焦。在这里你可以看到我的完整codepen
当对话框打开时,如何正确聚焦?
3条答案
按热度按时间hi3rlvi21#
你的代码的问题是你试图在实际渲染之前访问
$ref
,下面是一个包含工作代码的沙箱:https://codepen.io/Djip/pen/ZEYezzm?editors=1011为了解决这个bug,我添加了一个
setTimeout
,在对话框打开0.2秒后触发焦点。我第一次尝试使用$nextTick
,但这还不足以完成这项工作-您可以尝试调整计时器,使其尽可能低。noj0wjuj2#
我在切换对话框的属性的监视器中设置了焦点逻辑。
eqzww0vc3#
只需添加
autofocus
属性,当对话框打开时,它会将焦点设置在对话框内的v-text-field
上: