Keeping input value for validation in Vue JS

Question

Making login function with string validation with VueJS

Here is my code: Link

Problem occurs in this follow,

both input keep with empty and click Login button

error msg Enter your username and Enter your password appear
enter something in one of these input

ex) entering xxxx in password area
click Login button

Problem happens

I'd like to keep value in input box every time Login button clicked till both input value are correct.

How can I fix it?

Form validation function are written in Login.vue

Adam Orłowski · Accepted Answer · 2020-06-05 21:16:02Z

1

Register (add) value prop in Form.vue component:

props: {
// ...your registered props
// add below
  value: {
    type: String,
    default: "",
  },
},

Why?

Because right now it is not reactive. So when parent changes value child component does not react.

answered Jun 5, 2020 at 21:16

Adam Orłowski

4,53226 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

You are right. Adding value in props makes problem solved. Thanks a lot for your help!