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

function runs as expected. When switching from one map to another map, the
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
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?


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

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" />

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