Within my component child 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() {
this.setFocus()
}
},
methods: {
setFocus() {
this.$refs.name.focus()
}
}
}
</script>
<style lang="scss">
@import "../assets/css/components/Input";
</style>
In addition, I have a parent component where I interact with this input:
<div class="login-options">
<p class="choose" @click="chooseLogin('email')">With Email</p>
<div class="vertical-line" />
<p class="choose" @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
}
}
The issue I am facing is that when I trigger the function, it only focuses on one field once and then stops. I want to enhance the functionality of the focus prop so that when triggered, the field will be focused and continue to work multiple times, rather than just once as in its current state.