CODEWITHSUNDEEP
vue.js
Takeshi Tokugawa YD
Takeshi Tokugawa YD

Reputation: 960

Put focus on input field after it will be conditionally rendered in Vue

Target

On click to "edit" button, input field appears and automatically focused.

<button v-if="!editingMode" @click="editingMode = !editingMode">edit</button>
<input v-else type="text" value ref="input">

export default {
  name: "App",
  components: {
    HelloWorld
  },
  data: function() {
    return {
      editingMode: false
    };
  },
  methods: {
    onClickButton() {
      this.editingMode = true;
      this.$refs.input.focus();
    }
  }
};

🌎 Fiddle

Problem

Because re-rendering in Vue synchronous, when we calling this.$refs.input.focus(), input field could be not rendered yet. I experienced two cases:

  1. Input is not mounted yet. In this case, Error in v-on handler: "TypeError: Cannot read property 'focus' of undefined" will occur.
  2. No this error, but no focus too. It looks like there is the interval between input field mounted and ready to manipulations.

Upvotes: 2

Views: 2403

Answers (1)

alt146
alt146

Reputation: 526

Try calling it in this.$nextTick :

methods: {
  onClickButton() {
    this.editingMode = true;
    this.$nextTick(() => {
      this.$refs.input.focus();
    })
  }
}

https://codesandbox.io/s/sleepy-dew-5mcju

Upvotes: 5

Related Questions