[Vuejs]-How to pass focus props in components VueJS

by

0👍

✅

Here is solution. Actually, it was because v-if. v-if just remove element(-s) from DOM, so, the best way to solve such problems is to use conditional styling with display: none:

Input:

<template>
  <div class="basic-input-outer" :style="styles">
    <p class="paragraph-small">{{ title }}</p>
    <input ref="name" :type="type" class="basic-input">
  </div>
</template>

<script>
export default {
  name: "Input",
  props: ['type', 'styles', 'title', 'focus'],
  watch: {
    focus: function() {
      if (this.focus) this.$refs.name.focus()
    }
  }
}
</script>

<style lang="scss">
@import "../assets/css/components/Input";
</style>

And parent component:

<Input :style="[!loginWithEmail ? {'display': 'none'} : {'': ''}]" :focus="emailFocus" :title="'Email'" :type="'email'" />
<Input :style="[loginWithEmail ? {'display': 'none'} : {'': ''}]" :focus="phoneFocus" :title="'Phone number'" :type="'email'" />

...

    chooseLogin(option) {
      if (option === 'email') {
        this.loginWithEmail = true
        this.emailFocus = true
        this.phoneFocus = false
      } else {
        this.loginWithEmail = false
        this.emailFocus = false
        this.phoneFocus = true
      }
    }

Leave a comment