Set focus on input element with Vue

Question

I try to code an inline edit element. I like to have the focus on the input, after click. Here my code:

        <span v-show="!name.edit" @click="toggleEdit(this, name)">{{name.val}}</span>

            <input type="text"
                   v-model="name.val"
                   v-show="name.edit"
                   v-on:blur=" saveEdit(this, name)"
                   >
        </div>

        data: function () {
            return {
                name: {
                    val: '',
                    edit: false
                },

            }
        },

        methods: {
            ...mapMutations([

            ]),
            toggleEdit: function(ev, obj){

                obj.edit = !obj.edit;

                console.log(obj)
                if(obj.edit){
                    Vue.nextTick(function() {
                      ev.$$.input.focus();  
                    })
                }
            },

            saveEdit: function(ev, obj){
                //save your changes
                this.toggleEdit(ev, obj);
            }
        },

But it's still not working.

Adrian A · Accepted Answer · 2020-01-29 13:57:32Z

2

Try puting $ref in that specific input and vue.nextTick should be this.$nextTick: like this:

<input type="text"
      ref="inputVal"
                   v-model="name.val"
                   v-show="name.edit"
                   v-on:blur=" saveEdit(this, name)"
                   >

this.$nextTick(function() {
          this.$refs.inputVal.focus();
        });

https://codesandbox.io/s/keen-sutherland-euc3c

Usually for dynamic elements i would do this:

<template>
  <div>
    <template v-for="name in names">
      <span :key="name.name" v-show="!name.edit" @click="toggleEdit(this, name)">{{name.val}}</span>
      <input
        :key="name.name"
        type="text"
        :ref="name.val"
        v-model="name.val"
        v-show="name.edit"
        v-on:blur=" saveEdit(this, name)"
      >
    </template>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data: function() {
    return {
      names: [
        {
          val: "TEST1",
          edit: true
        },
        {
          val: "TEST2",
          edit: true
        },
        {
          val: "TEST3",
          edit: true
        }
      ]
    };
  },
  methods: {
    toggleEdit: function(ev, obj) {
      obj.edit = !obj.edit;

      console.log(obj);
      if (obj.edit) {
        this.$nextTick(function() {
          this.$refs[`${obj.val}`][0].focus();
        });
      }
    },

    saveEdit: function(ev, obj) {
      //save your changes
      this.toggleEdit(ev, obj);
    }
  }
};
</script>

edited Jan 29, 2020 at 13:57

answered Jan 29, 2020 at 13:46

Adrian A

4502 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Peter Over a year ago

It works, thanks. But now, I like to add a second and a third input element. How can I us this.$refs.inputVal.focus(); dinamically?

Adrian A Over a year ago

i edited my answer, take a look and see if it's clear

Collectives™ on Stack Overflow

Set focus on input element with Vue

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related