How to pass focus props in components VueJS-CodePudding

I have component child Input:

<template>
  <div  :style="styles">
    <p >{{ title }}</p>
    <input ref="name" :type="type" >
  </div>
</template>

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

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

And I have parent component where I work with this input:

   <div >
     <p  @click="chooseLogin('email')">With Email</p>
     <div  />
     <p  @click="chooseLogin('phone')">With Phone Number</p>
   </div>

   <div v-if="loginWithEmail">
    <Input :focus="emailFocus" :title="'Email'" :type="'email'" />
   </div>
   <div v-else>
     <Input :focus="phoneFocus" :title="'Phone number'" :type="'email'" />
   </div>

...

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

So, the problem is, when I trigger the function it only focuses one time on one field, and then stops. I want to make that focus props works that way, so when it's triggered, the field will be focused, and it will be working not just one time, like in this case.

CodePudding user response：

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  :style="styles">
    <p >{{ title }}</p>
    <input ref="name" :type="type" >
  </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
      }
    }