<component :is> and KeepAlive in Vue

Vue interview exercise on Slots & dynamic components, difficulty 2 of 3. Solve it in the editor beside a worked example; the tests run the moment you do.

Write Wizard around the given StepName and StepEmail components (each keeps what was typed in its own ref): render the current step with <component :is>, a <button class="back"> and a <button class="next"> moving between them, and keep each step's typed text when the user goes back and forth (KeepAlive).

Each exercise pairs a worked example with a twin problem to solve in a real editor; the tests run the moment you do. Progress is saved in your browser, and in your account if you sign in.

More Slots & dynamic components in Vue

All Vue exercises · Other languages and frameworks