How can I assign prop to data once-CodePudding

I have an element

            <input
              type="text"
              
              name="email"
              ref="email"
              :value="emailInput"
              @keyup.enter="checkEmailAndSendCode"
            />

Now I want to assign prop data once to it

let emailInput = ref<string>("")
emailInput.value = props.form_data.email

Now I want to update it and show confirmation code block

const checkEmailAndSendCode = () => {
  // TODO: check email

  console.log('we are sending email: ', emailInput.value)

  // Require code for the new email entered
  requireEmailCode(emailInput.value);

  // Show email code block
  state.email.isNewEmailEntered = true;
};

Result: when I press Enter the emailInput is again populated not by the changed email but by email in props.form_data.email and old email is sent. Console.log shows value from props.form_data.email and not the email I input into form

What I want: I want emailInput to be populated from props only on start

CodePudding user response：

So, instead of assigning the value of form_data.email to emailInput, like that.

let emailInput = ref<string>("")
emailInput.value = props.form_data.email

Just, set the value inside ref declaration parameter.

let emailInput = ref<string>(props.form_data.email)

And use v-model for two way binding instead of :value which the input value will not update with the update of emailInput.