Vue.js vuejs:尝试使用v-el指令聚焦输入

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

在这里，我试图使用

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>

---

}))

您的passwordInput位于v-if块内，只有将

flow.password

设置为true时，才会呈现该块；但是，Vue使用异步渲染，因此不会立即渲染v-if块。您可以使用

Vue.nextTick

等待它执行以下操作：

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

---

阅读有关异步渲染的指南。

很高兴这对你们中的一些人有用。 我不知道为什么，但在尝试了接受答案的每一个可能的变体之后，当使用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:

{{$key}}

addRecipients函数是在v-repeat之外调用的，因此即使是建议的答案也帮不上忙

---

不确定这样做是否有问题，但它可以工作，我很累。

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

例如：

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

---

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

--

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

使用

ref=“passwordInput”

代替

v-el=“passwordInput”

在你的方法中：

this.$refs.passwordInput.focus()

---

我希望这对你有帮助

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

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

---

我希望它能有所帮助。

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

---

工作示例：

Vue v2的文档使用focus作为编写自定义指令的示例。示例中提供了所需的所有代码。首先，必须注册该指令。该链接显示如何在组件上本地注册它

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

---

就像这样。

我只想补充一点，如果您在另一个方法中引用el this，那么Vue.nextTick就存在于该方法中。这还不是很清楚。这是唯一一个在v-for循环中对我的输入字段有效的解决方案。我不得不修改这个解决方案来删除更新：部分。我有两个字段，用户名和密码，并用v-focus标记用户名。输入密码时，焦点将跳回每个字符的用户名。我可以想象，也许通过删除更新功能，我会错过一些应该触发对用户名关注的事件，但到目前为止还没有遇到。一个简洁有效的答案，如果可能的话，我会给你两张弃权票。谢谢。示例记录在。I get:

Uncaught TypeError:无法读取未定义的属性“passwordInput”

I get:Uncaught TypeError:无法读取未定义的属性“txtName”。这是在“创建”方法中实现的。

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

<input v-focus>

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

<input v-focus>