I am having trouble selecting the password textbox in my code when it does not match with the confirm password textbox after clicking the register button. Click here to see the image of the desired output
Is there a similar function to select() in VueJS that I can use? The textbox I want to select is in the ref state.
I attempted value.select() but it returned an error in the console saying it is not a function.
Just to clarify, I am still in the process of learning about VueJS and Quasar. I have been researching and reading documentation but have not found a solution yet.
Here is the code below.
<template>
<div class="window-height window-width row justify-center items-center">
<q-card class="my-card">
<q-card-section class="col-10" style="width: 800px">
<q-input v-model="nameTextBox" label="Name" />
<q-input ref="email" v-model="emailTextBox" type="email" label="Email" />
<q-input ref="password" v-model="passTextBox" type="password" label="Password" />
<q-input v-model="conPassTextBox" type="password" label="Confirm Password" />
<br />
<br />
<q-btn color="secondary" class="q-mr-lg"
@click="registerProfile(emailTextBox, nameTextBox, passTextBox, conPassTextBox)">
Register
</q-btn>
<q-btn :to="'/'">Cancel</q-btn>
</q-card-section>
</q-card>
</div>
</template>
<script setup>
import { ref, getCurrentInstance } from 'vue'
const { $feathers } = getCurrentInstance().appContext.config.globalProperties
const nameTextBox = ref('')
const emailTextBox = ref('')
const passTextBox = ref('')
const conPassTextBox = ref('')
const checkConfirmPassword = (pass, conPass) => {
// console.log(pass, conPass)
if (pass === conPass) {
return true
} else {
return false
}
}
const registerProfile = (emailText, nameText, passText, conPassText) => {
console.log(emailText)
$feathers.service('/users').find({
query: {
email: emailText
}
})
.then(() => {
// email found
alert('Email has already been registered. Please use another email.')
// ref.email.select()
})
.catch(() => {
console.log(checkConfirmPassword(passText, conPassText))
if (checkConfirmPassword(passText, conPassText) === false) {
alert('Password is the same. Please retype it again.')
passTextBox.value.select() // -> This syntax does not work.
} else {
console.log('Passed')
$feathers.service('/users').create({
email: emailText,
name: nameText,
password: passText
})
}
})
}
</script>