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

vue.js Vue.js

乐ASam

2020-03-19

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

这里我试图集中使用

this.$$.passwordInput.focus()

但是如果出现以下错误

Uncaught TypeError: Cannot read property 'focus' of undefined

完整的代码如下

index.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>

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

}）;

第2335篇《vuejs：尝试使用v-el指令集中输入》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共4个回答
NearHarrySam 2020.03.19

如果您使用的是Vue.js 2.0，则应执行以下操作：

<input type="text" v-model="currentItem.name" ref="txtName">

因此，您可以使用$ refs对象访问此输入：

this.$refs.txtName.focus();

希望对您有所帮助。

番长千羽 2020.03.19

Vue.js 1的工作原理有所不同。

例：

  <textarea v-el:model_message></textarea>

JS：

this.$els.model_message.focus();
小胖路易神无 2020.03.19

您的passwordInput位于v-if块内，仅当您设置flow.password为true 时才会渲染；但是Vue使用异步渲染，因此不会立即渲染v-if块。您可以使用Vue.nextTick它来直到：

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

阅读有关异步渲染的指南以获取更多详细信息。

LL 2020.03.19

如果您使用的是vuejs 2，则应阅读以下内容：

https://vuejs.org/v2/guide/migration.html#v-el-and-v-ref-replaced

-

在这种情况下，在您的模板中：

用ref="passwordInput"代替v-el="passwordInput"

并在您的方法中：

this.$refs.passwordInput.focus()

希望对您有所帮助！

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android