我带有自定义文本字段,当对话框打开时必须聚焦它的功能。我尝试使用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代码。
当对话框打开时,我如何正确地将其聚焦?
$ref
的 name 是不允许的?在我的代码中已经定义了,或者我不能把$ref
的名称定义为“name”? - Andreas Hunter$ref
作为name
可以正常工作,不知道为什么一开始我没能让它工作 - 我会编辑我的答案。 - Jesper