Vue component does not refresh when data changes unless using the :key attribute

I have been encountering an interesting issue with my simple breadcrumbs component in the app. Despite having a data property called pickedTable, the component fails to re-render when this data changes. However, by adding the :key="pickedTable" attribute, it triggers the re-rendering process. Why is this behavior occurring?

Has anyone else faced a similar issue?

https://i.sstatic.net/5rFvW.jpg

export default {
    template: `
        <div class="cr-snackbar">
            <div class="cr-snackbar-selection">
                Table {{ pickedTable }}
            </div>
        </div>
    `,

    data()
    {
        return {
            pickedTable: '2',
        }
    },

    mounted()
    {
        setInterval(() => {
            this.pickedTable = '3'
        }, 3000)
    }
}

In order to resolve this issue, I found that adding the key attribute was the solution.

<div class="cr-snackbar-selection" :key="pickedTable">
  Table {{ pickedTable }}
</div>

Answer №1

This is not a problem, but rather a valuable feature.

Vue utilizes an innovative algorithm that reduces element movement and seeks to efficiently patch/reuse elements of the same type in their original positions. By using keys, Vue will rearrange elements based on changes in key order, removing/destroying elements with keys that are no longer present.

For further information, refer to the official documentation: https://v2.vuejs.org/v2/api/#key

Additionally, here is a helpful article discussing component re-rendering:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering issues with Apostrophe when trying to run Next JS build

While running the build, I encountered this issue: import styles from '../styles/Home.module.css' export default function Home() { return ( <div className={styles.container}> <title>Filmydom&l ...

Combining Mocha, BlanketJS, and RequireJS has resulted in the error message "No method 'reporter'."

While using Mocha with RequireJS, my tests are running smoothly. However, I encountered an issue when trying to incorporate blanket code coverage. The error Uncaught TypeError: Object #<HTMLDivElement> has no method 'reporter' keeps popping ...

Retrieving data from the chosen selection in AngularJS

My current task involves extracting the URL from the selected option and assigning it to the ng-model of the select element. Here is the HTML code snippet: <select ng-model="ddValue1.value"> <option ng-repeat="d in ddOptions1" value="{{d.val ...

Utilizing Mongoose Schema Enums Alongside TypeScript Enums

In our Typescript-based NodeJs project utilizing Mongoose, we are seeking the right approach to define an enum field on a Mongoose schema that aligns with a Typescript enum. To illustrate, consider the following enum: enum StatusType { Approved = 1, ...

Error: The value is null and cannot be read

My external application is set up within a const called setupRemote, where it starts with the appConfig in the variable allowAppInstance. export const setupRemote = () => { if (isRemoteAvailable) { try { ... const allowAppInstance = S ...

Because of the CSS tree structure, it is not possible to add or remove classes. This restriction applies to all actions done in jQuery, including click

I want to create a hover effect where the CSS changes when hovering over an item, then reverts back to normal when no longer hovered. Additionally, I would like the CSS to change when the item is selected, and return to normal when another item in the same ...

Vite terminal not executing Npm commands

Here is what I entered: npm run dev Error: npm ERR! Missing script: "dev" npm ERR! npm ERR! To see a list of scripts, run: npm ERR! npm run npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\andre\AppData&bs ...

JS: Modifying this function to manage a click on a hyperlink

After following the guide provided here I have successfully implemented a drop down list that sends the value to an external PHP script, retrieves HTML output, and displays it in a "div" on the same page. It works flawlessly. My next objective is to send ...

Displaying the boolean value of a list item in an input field using Vue.js

I have a collection of data from a backend that includes strings, numbers, and booleans. These values need to be shown in text fields. I am using <b-input ... /> component from bootstrap-vue for the input field. It works fine with boolean, but th ...

Issue encountered: Unable to locate the file "SignInScreen" within the directory "./src/screens/authScreens" as referenced in the file "App.js"

App.js: import { StyleSheet, Text, View, StatusBar } from "react-native"; import { colors, parameters } from "./src/global/styles"; import SignInScreen from "./src/screens/authScreens/SignInScreen"; export default function A ...

PHP code cannot be outputted to JavaScript due to a syntax error

Although there is a syntax error, the code seems to be working. I am curious about how to make it syntactically correct. The provided code snippet is part of a script that sets up variables for an Ajax call. Depending on the scope, the corresponding varia ...

Is it possible to livestream game server chat on a website?

Playing Swat 4 v1.0 multiplayer has been a blast for me. Recently, I came across a website called www.houseofpain.tk that displays a live server chat viewer. I'm really interested in adding this feature to my own gameserver. I believe the other site u ...

Retrieve an item from a MongoDB database using Mongoose

It seems like a simple problem, but my brain is struggling to comprehend the issue at 2 AM. I'm working on creating a profile page that displays basic public information. My approach involves retrieving the user's username from MongoDB based on t ...

Issue with retrieving query results using node_redis client

I've been struggling with a particular issue that I just can't seem to solve. The problem revolves around not being able to retrieve output values from a Redis query. My setup involves using the node_redis client as the Redis driver for my Node.J ...

Tips on incorporating personalized javascript functions into Durandal

I am currently working on my first project using the Durandal framework to create a basic website. I have encountered an issue while trying to incorporate a simple JavaScript function. My goal is to execute the function after the DOM has loaded, but I am u ...

Error: The server instance pool has been terminated, requiring enhancements to the existing solution

I'm facing an issue where removing the client.close() seems to solve the problem, but I can't leave connections open to the database after the function is done. It doesn't feel secure to me. Even though the initial write completes successful ...

Is it possible to alter the video dynamically according to the state in Vuex?

I am working on a small web application that mimics the appearance of FaceTime. My goal is to switch between video elements by clicking a "Next" button, which will update a value in Vuex and swap out the video accordingly. I initially attempted this appr ...

Can someone help me identify the table rows that are adjacent to a dropped row in a jQueryUI Sortable setup?

My current setup involves using the jQueryUI Sortable plugin on a table, and thankfully everything appears to be functioning correctly. Both the HTML and JavaScript are passing validation. However, I am faced with the challenge of finding a way to identi ...

When "this" doesn't refer to the current object, how to self reference an object

I am currently working on developing a modular series of element handlers for an application that features pages with different configurations. For example, the 'Hex T' configuration includes elements labeled from 'A' to 'O', ...

How can one retrieve the ID value within a function using jQuery?

I am trying to implement an upload picture function along with cropper js function. However, I am facing an issue with displaying the file name even though I have declared the variable and set the input value. But when I attempt to pass and display the nam ...