[Vuejs]-Browser not rendering the updated value but Vue DevTools does

by

1👍

✅

you should create a new reference of the loggers array. try the following:


changeLevel(level, index) {

    let loggers = [...this.loggers]

    loggers[index].selectedLevel = level

    this.loggers = loggers;
    this.levelChanged = true;
},
getLevel() {

    const itemFound = this.loggers.find(item => item.logger === this.searchData)

    if (itemFound) {
        this.popUpListener("This class is already listed!");
    } else {

        var allLevel = ["WARN", "DEBUG", "INFO", "ERROR", "FATAL"];

        let logger = this.filteredLoggersList.find(item => item.logger === this.searchData)

        // debug the logger value
        console.log({logger})

        if (logger) {

            logger.allLevel = allLevel;
            logger.selectedLevel = "Select & update";

            // creating a new reference for the array logger
            this.loggers = [...this.loggers, logger];

            //alert(logger);
        }
    }
}

Your objects should be immutable. thus having a new reference each time you alter your objects. vue’s render uses a Virtual DOM to compare objects with DOM so if you modify your object loggers directly VDOM will not know what is actually rendered inside that object, so it won’t render.

I advise you to check how VDOM renders objects and how immutability works and check out some of the best practices, good examples here.

👤Ali Kleit

Leave a comment