我正在尝试在Vue.js中设置输入元素的焦点。我在网上找到了一些帮助,但没有一种解释对我有用。
这是我的代码:
<template>
<form method="post" action="" v-on:submit.prevent="search">
<input type="text" placeholder="Person name" required v-model="name" v-el="nameInput" />
<input type="text" placeholder="Company" required v-model="company" v-el="domainInput" />
<input type="submit" value="Search" class="btn show-m" />
</form>
</template>
<script>
export default {
data () {
return {
contacts: [],
name: null,
company: null
}
},
ready: {
// I tried the following :
this.$$.nameInput.focus();
this.$els.nameInput.focus();
// None of them worked !
}
methods: {
search: function (event) {
// ...
// I also would like to give the focus here, once the form has been submitted.
// And here also, this.$$ and this.$els doesn't work
},
}
}
</script>
我尝试过this.$$.nameInput.focus();
并且this.$els.nameInput.focus();
可以在网上找到目标焦点,但是this.$$
没有定义,并且this.$els
为空。
如果可以的话,我正在使用vue.js v1.0.15
谢谢您的帮助。
根据vue 2.x,您还可以在组件中本地注册“指令”以获取自动聚焦。
只需在组件中编写指令:
然后在模板中,可以在任何元素上使用新的v-focus属性,如下所示: