How do you reuse elements with key attribute?

Posted by Jennifer | Updated on

Vue always tries to render elements as efficient as possible. So it tries to reuse the elements instead of building them from scratch. But this behavior may cause problems in few scenarios.

For example, if you try to render the same input element in both v-if and v-else blocks then it holds the previous value as below,

In this case, it shouldn’t reuse. We can make both input elements as separate by applying key attribute as below,

The above code make sure both inputs are independent and doesn’t impact each other.

If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@] Your question and answer will appear on and help other developers.

Related Questions & Answers