我正在创建一个向导登录表单,首先输入手机号码,然后

这里我试图使用

this.$$.passwordInput.focus()

然而,如果我得到下面给出的错误

Uncaught TypeError: Cannot read property 'focus' of undefined

完整代码如下

指数html

<div id="login">
  <div v-if="flow.mobile">
    <form v-on="submit: checkmobile">
        <p>
          Mobile Number<br>
          <input type="text" v-model="mobile_number" v-el="mobileNumber">
        </p>
    </form>
  </div>
  <div v-if="flow.password">
    <form v-on="submit: checkpassword">
        <p>
          Password<br>
          <input type="password" v-model="password" v-el="passwordInput">
        </p>
    </form>
  </div>

playbook js

var demo = new Vue({
el: '#login',
data: {
    flow: {
        mobile: true,
        password: false
    }
},
methods: {
    checkmobile: function(e) {
        e.preventDefault();
        this.flow.mobile = false;
        this.flow.password = true;
        this.$$.passwordInput.focus();
    },
    checkpassword: function(e) {
        e.preventDefault();
    }
}

});

推荐答案

passwordInput位于一个v-if块中,只有将flow.password设置为true时才会呈现该块;但是,Vue使用异步渲染,因此不会立即渲染v-if块.您可以使用Vue.nextTick来等待它:

this.flow.password = true;
var self = this;
Vue.nextTick(function () {
  self.$$.passwordInput.focus();
});

阅读关于异步渲染的指南more details.

Vue.js相关问答推荐

Vue 3使用计算(computed)属性对象获取图像信息,在模板中呈现值时变为NaN

NUXT 3 在客户端获取数据

是否可以使用 Vuetify/VueJS 为轮播设置默认图像而不是第一个图像?

vue router/:param 斜杠的参数

禁用 vue-cli webpack 编码图像 base64

如何在 A-La-Carte 系统中使用 vuetify 加载程序时导入 vuetify/lib

VueJS:在组件之间使用全局对象的最佳实践?

Eslint Vue 3 解析错误:'>' expected.eslint

在 v-for 的情况下如何从 v-model 输入更新 Vuex 存储

Angular 5 中的 功能

vue-test-utils:无法覆盖属性 $route,这通常是由于插件将该属性添加为只读值

使用 Blade/Mustache 模板混合 Laravel 和 Vue.Js

如何告诉 Vue 应用使用 Firebase 模拟器?

Vue.js 无法切换字体真棒图标

基本 vue.js 2 和 vue-resource http 获取变量赋值

如何避免在 Vue 中一直写 this.$store.state.donkey 的需要?

在子元素 vueJS.2 之间切换active类

vuex 是 state.array.push react式的吗?

IOS在输入焦点上显示键盘

Vue-i18n - 无法读取未定义的属性配置