Question

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

这里尝试使用

关注密码输入

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

}）;

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

阅读有关异步呈现的指南以获取更多详细信息：http://vuejs.org/guide/best-practices.html#Understanding_Async_Updates

Answer 2

如果您使用的是vuejs 2，则应阅读：

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

-

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

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

并在您的方法中：

this.$refs.passwordInput.focus()

我希望这能帮到你！

Answer 3

在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/

Answer 4

很高兴这对你们中的一些人有用。我不知道为什么，但在尝试了所接受的答案的每个可想到的变化之后，在使用v-repeat时我无法获得$$。ref属性。我只能这样访问新创建的dom元素：

new Vue({
el: '#reporting_create',
data: {
    recipients: {
        0: {
            fname: null,
            lname: null,
            email: null,
            registration: false,
            report: false
        }
    },
    curRec:1
},
methods: {
    addRecipient: function(){
        event.preventDefault();
        this.recipients.$add(
            this.curRec,
            {
                fname: null,
                lname: null,
                email: null,
                registration: false,
                report: false
            }
        );
        var num = this.curRec;
        this.$nextTick(function () {
            console.log(this._children[num].$$.rowrec);
            newSwitches.find('.switch').bootstrapSwitch();
        })

        this.curRec++;
    }
}})

HTML：

<template v-repeat="recipients">
        <div class="row" v-el="rowrec">
            <div>{{$key}}</div>
        </div>
</template>

addRecipients函数在v-repeat之外被调用，所以即使建议的答案here也无法帮助

不确定这样做是否有问题，但它有效并且我累了。

Answer 5

Vue.js 1的工作方式略有不同。

示例：

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

JS：

this.$els.model_message.focus();

Answer 6

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

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

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

this.$refs.txtName.focus();

我希望它有所帮助。

Answer 7

Vue v2的文档以焦点为例编写自定义指令。示例https://vuejs.org/v2/guide/custom-directive.html随附了所有必需的代码。首先，您必须注册指令。链接显示了如何在组件上本地注册。

// Register a global custom directive called `v-focus`
Vue.directive('focus', {
  // When the bound element is inserted into the DOM...
  inserted: function (el) {
    // Focus the element
    el.focus()
  }
})

完成此操作后，您现在可以在元素上使用v-focus：

<input v-focus>

就这样。

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

7 个答案: