dlkulp dlkulp -4 years ago 374
Javascript Question

VueJs mounted nextTick function not being called

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

mounted/nextTick
function runs as expected. When switching from one map to another map, the
mounted/nextTick
function does not run which results in vue's model reflecting the change in current map but the DOM still showing the previous element.

Another Example: More generically, lets say I have components A and B. The user creates A1, A2, and B1. When the user switches between any component of type A and B ((A1||A2) && B1), the
mounted/nextTick
function runs as expected. When the user shows component A1 and the switches to A2, the DOM continues to show the data for A1.

Question: How do I get the DOM to reflect changes from one component to another of the same type?

Example:

<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[0].type == 'map'" :data="changes"></map>
<graph v-if="active[0].type == 'graph'" :data="changes"></graph>
</template>

Answer Source

@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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download