How to reload child components in vue.js | Code2night.com
Code2night
  • Home
  • Blogs
  • Tutorial
  • Post Blog
  • Members
    • Register
    • Login
  1. Home
  2. Blogpost
15 May
2021

How to reload child components in vue.js

5323

Vue js Child Components

So Vue js child components are basically a small piece of code that can be used to render some part of code at many places to make it more reusable. While using those as a beginner we need to reset the fields inside vue js child components. But following the props way of resetting data isn't as easy to implement as a newcomer so we will see how to reload vue js child component without props method.

Re-Render vue js child component-

So the best way to re-render  a child component is using :key attribute. We will see how to use this.

So first of all you have to add a :key attribute on your child component. Like we have showed in the image below


<template>
  <child-component-name :key="componentKey" ></child-component-name>
</template>

So, after adding this you have to declare this key variable in data method like we have shown in next image

So , the basic idea behind this is that vue js will re-render the child component every time you will change the value of the :key . It means if we change the value of componentKey then the child view will be reloaded . You can try changing the value like we have showed in the next image 

So, whenever we will increment the key value , the child component will be reloaded to its new state.You can do that on any button click or inside any method. So this is how we can reload child component in vue js.  

  • |
  • Vue js , Child Components , How to reload vue js child components

Comments

Follow Us On Social Media - Like Us On Facebook

Tags

LinkedinLogin
LinkedinProfile
GetLinkedinProfile
C#
Aspnet
MVC
Linkedin
ITextSharp
Export to Pdf
AspNet Core
AspNet
View to Pdf in Aspnet
Model Validation In ASPNET Core MVC 60
Model Validation
Model Validation In ASPNET Core MVC
Model Validation In ASPNET
Image Compression in AspNet
Compress Image in c#
AspNet MVC
Free Download for New Subscribers!

Subscribe and Click on Verify and Download for download link

Subscribe Now | 671
Download
Support Us....!

Please Subscribe to support us

Thank you for Downloading....!

Please Subscribe to support us

Continue with Downloading

Welcome To Code2night, A common place for sharing your programming knowledge,Blogs and Videos

  • Panipat
  • info@Code2night.com

Links

  • Home
  • Blogs
  • Tutorial
  • Post Blog

Popular Tags

Copyright © 2023 by Code2night. All Rights Reserved

  • Home
  • Blog
  • Login
  • SignUp
  • Contact
  • Terms & Conditions
  • Refund Policy
  • About Us
  • Privacy Policy
  • Json Beautifier