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

23922 观看

7回复

255 作者的声誉

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

这里我试图使用密码输入

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

});

作者: Anish Dcruz 的来源 发布者: 2015 年 6 月 16 日

回应 (7)


41

2188 作者的声誉

决定

您的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 发布者: 16.06.2015 03:28

1

722 作者的声誉

很高兴这对你们中的一些人有用。我不知道为什么,但在尝试了所接受的答案的每个可能的变化之后,在使用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之外被调用,所以即使这里建议的答案也无济于事

不知道这样做是否有问题,但它有效,我很累。

作者: Roark 发布者: 25.08.2015 09:40

1

1830 作者的声誉

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

例:

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

JS:

this.$els.model_message.focus();
作者: Jamie 发布者: 04.02.2017 01:03

10

3085 作者的声誉

如果您使用vuejs 2,您应该阅读:

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

-

在这种情况下,在您的模板中:

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

在你的方法中:

this.$refs.passwordInput.focus()

希望这对你有所帮助!

作者: Sebastián Lara 发布者: 23.02.2017 03:29

0

101 作者的声誉

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

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

因此,您可以使用$ refs对象访问此输入:

this.$refs.txtName.focus();

我希望它有所帮助。

作者: Joel Rodrigues 发布者: 10.03.2017 12:59

8

12617 作者的声誉

在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 发布者: 14.03.2017 09:32

0

61 作者的声誉

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>

像这样。

作者: Enoch 发布者: 27.12.2018 08:25
32x32