vuejs：尝试使用 v-el 指令集中输入

Question

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

这里我试图集中使用密码输入

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>

脚本.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();
    }
}

});

原文由 Anish Dcruz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您的 passwordInput 位于 v-if 块内，仅当您将 flow.password 设置为 true 时才会呈现；但是 Vue 使用异步渲染，所以 v-if 块不会立即渲染。您可以使用 Vue.nextTick 等待它：

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

阅读有关异步呈现的指南以了解 更多详细信息。

原文由 Evan You 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在 Vue.js 2.x 中，您可以创建自己的指令来自动聚焦一个字段：

 Vue.directive('focus', {
    inserted: function (el) {
        el.focus();
    },
    update: function (el) {
        Vue.nextTick(function() {
              el.focus();
        })
    }
})

然后你可以在输入和其他元素上使用 v-focus 属性：

 <input v-focus>

工作示例： https ://jsfiddle.net/LukaszWiktor/cap43pdn/

原文由 Lukasz Wiktor 发布，翻译遵循 CC BY-SA 3.0 许可协议