How do I get functionality to execute when switching between two components of the same type?
The Problem: I have several map and chart components that need to display different data. When switching from a map to a chart component, the
<side-bar></side-bar> <!-- List of elements to choose from (ex: map1, map2, graph1)-->
<template> <!-- The element to be shown with different data depending on which element was clicked -->
<map v-if="active.type == 'map'" :data="changes"></map>
<graph v-if="active.type == 'graph'" :data="changes"></graph>
@Manan Vaghasiya gave the proper solution. Vue.js has a key prop that can be added to tell the Vue virtual DOM algorithm to treat each element as a separate item. In code, this looks like this:
<template v-for="item in items"> <custom-element :key="something.unique" /> </template>
This will allow multiple instances of the same custom component to be swapped and not treated as the same object which allows the
mounted/nextTick() function to run every time.