I want my code to select the password textbox when it does not matched with the confirm password textbox after clicking the register button. Click here to see the image of the wanted output

Is there an equivalent way of doing select() function in VueJS? The textbox that I want to be selected is in ref state.

I've tried value.select() but it showed on console that it is not a function.

Just a disclaimer that I'm still learning about VueJS and Quasar. Been googling and reading documents and still no luck.

Here's the code below.

<template>
    <div >
        <q-card >
            <q-card-section  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" 
                    @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 anothere 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>

CodePudding user response：

You are calling the select method on the value of your password textbox (on a string!). You need to define your ref instances and use them. In order to define refs first, define ref names:

const password = ref(null)
const email = ref(null)

then in the HTML part use the exact names for the ref prop:

<q-input ref="email" v-model="emailTextBox" type="email" label="Email" />
<q-input ref="password" v-model="passTextBox" type="password" label="Password" />

and finally, use these variables to reference elements.

password.value.select()
// or
email.value.select()

Full code would be:

<template>
    <div >
        <q-card >
            <q-card-section  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" 
                    @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('')

// Define refs to components. 
// Use this variable name as the one you set in the ref prop for the component.
const password = ref(null)
const email = ref(null)

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 anothere email.')
      email.value.select() // this works either
    })
    .catch(() => {
      console.log(checkConfirmPassword(passText, conPassText))
      if (checkConfirmPassword(passText, conPassText) === false) {
        alert('Password is the same. Please retype it again.')

        password.value.select() // -> This works know.

      } else {
        console.log('Passed')
        $feathers.service('/users').create({
          email: emailText,
          name: nameText,
          password: passText
        })
      }
    })
}

Please look at this link to figure out how refs work in Vue3 and composition API.