CODEWITHSUNDEEP
vuejs3
Jackie
Jackie

Reputation: 23607

Why am I losing my first char when trying to an input whie a change state is happening with Vue3?

I have this js fiddle it is basically trying to go from an error state to a good state when the first letter of a string is typed into the input. Here is the code that changes the props on the input event...

inputTitle(event){
  this.title = event.target.value;
  this.titleValid = this.title !== "";
},

The Problem is because these events appear to be causing some sort of render collision the first typed letter is lost. Is there a way I can avoid the first keystroke getting lost?

Upvotes: 0

Views: 63

Answers (1)

pwlam09
pwlam09

Reputation: 96

There are two problems in your code.

First one is titleValid cannot be used in TestComponent.

Second one is that your code will trigger a weird behaviour of input field rendering. On first input event, the input field is re-rendered due to change of valid. value prop remains unchanged and the input field is re-rendered with initial value of value which is an empty string. So the first input is cleared. The following input event works because valid remains true and the input is not cleared. To solve this, you can pass the input value to value prop. You can take a look at ​ https://jsfiddle.net/Lkzs3pax/1

Upvotes: 1

Related Questions