Updating Vue-Devtools props in Chrome while executing asynchronous promise functions: A step-by-step guide

When working with Vue 3 and mutating a prop that is an object (I understand it's not recommended to mutate props directly, but in this case it works because it's passed by reference as an object), I noticed that the changes reflect in the Vue Dev-Tools which is really helpful.

However, when making multiple axios calls and resolving promises, I observed that the prop does not update in the Vue Dev-Tools. Strangely though, if I console.log the prop, I can see all the updated data.

So, my question is: How can I ensure that Vue Dev-Tools reflects the updates after resolving async promises? It becomes challenging to debug when the props are not syncing properly.

export default {
  props: {
    translation: Object
  },
}

// [...]

// Modification reflected in Vue Devtools
this.translation["test"] = { source: "source", target: "target" }

// Performing async call or promise with axios
Promise.all(promises)
.then((responses) => {
    responses.forEach((response) => {
        this.translation[Object.keys(response.data)[0]] =
            response.data[Object.keys(response.data)[0]];
    });
})
.then(() => {
    console.log("-------------------");
    console.log("After: Promise.all:");
    // Mutations visible through console.log but not in Vue Dev-Tools
    console.log(this.translation);
})

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

Strategies for Mitigating Duplicate Requests in AngularJs with just one click

I am facing an issue with my AngularJS application where clicking on a link triggers the API call twice. I'm not sure why this happens and how to fix it. My service: SomethingService function getData() { return apiSettings.getApiInformation().t ...

Tips for overcoming a challenge with a promise of $q

Currently in my AngularJS project, I am utilizing $q for promises and feeling a bit overwhelmed with the usage. How can I resolve this promise-related issue? My goal is to either return the user when isLoggedInPromise() is triggered or provide a response ...

The sticky header is malfunctioning due to a null offsetTop value

import React , {useRef, useEffect} from 'react' import './header.css' const nav_links =[ { path:'#home', display:'Home' }, { path:'#about', display:'About& ...

What is the best way to attach a tag or label onto multiple objects so that it remains facing the camera whenever the user interacts with the objects?

My goal is to create a tag or label that always faces the camera when a user clicks on an object, even if that object is rotated. How can I achieve this? I've been advised to use an Orthogonal camera, but I'm not sure how to do that. Additionall ...

Exploring nested object values in React Js through iteration

I have been searching extensively for a solution to no avail. I have an object created from fetched data with the following structure: { id: string, title: string, price: { currency: string, amount: number, }, ...

What is the best way to integrate the lang class from Laravel into Vue.js 2?

Here is an example of my Vue component: <template> <ul class="nav nav-tabs nav-tabs-bg"> <li role="presentation" v-for="item in tabs"> 1. failed -> {{ item.name }} 2.success -> {{trans('purchase.payment ...

Running a function with a parameter upon clicking results in an error

I am facing an issue with a computed Vue function that includes a parameter. Whenever I attempt to bind it to a click event, I encounter the following error message: Error in event handler for "click": "TypeError: searchHashtag is not a function" Below is ...

What is the best way to resolve an npm build error on Windows 10?

I have exhausted all options but still cannot successfully install any npm modules. Any suggestions on how to resolve this issue? Microsoft Windows [Version 10.0.17134.590] (c) 2018 Microsoft Corporation. All rights reserved. C:\Users\Dell&bsol ...

Is the image overlay experiencing a flickering issue?

Last time, none of the solutions seemed to work quite right with the project, so let me try asking the question in a slightly different way this time. Basically, I have an image that, when someone hovers their mouse cursor over it, a div appears (containi ...

VueJS: Unable to access the 'name' property as it is undefined"

I'm at a loss trying to figure out a solution for this issue. My current task involves editing a pub schedule using an edit form: pubs/UpdateProfile.vue <template> <confirm title="Edit Pub" ok="Save pub" :show="show" v-on:save="sa ...

When using expressjs and typescript, you may encounter an error stating that the type 'typeof <express.Router>' cannot be assigned to the parameter type 'RequestHandlerParams'

Working on my project using expressjs with the latest typescript definition file and typescript 2.3.4 from https://github.com/DefinitelyTyped/DefinitelyTyped. I've set up a router and want to access it from a subpath as per the official 4.x documentat ...

Sorting through a list post a retrieval action

Could you guys please help me understand why my code is not functioning properly? I am receiving an array from my backend rails API, which is providing the data correctly. I have created an empty array where I filter the records based on their ID. The fi ...

Issue: Unable to locate file 'socket.io-client/dist/socket.io.min.js'

Attempting to set up the Spika backend (node application), I ran into an issue while trying to start the server in standalone mode with the command: $ node src/server/main.js The error that popped up was: Error: Cannot find module 'socket.io-clien ...

Is there a way to imitate a method that initiates an AJAX request?

I am currently working on writing tests for my Angular application and I need to mock a method in order to avoid making actual requests to the server. Within my grid.service.ts file, here is the method I am trying to mock: loadAccountListPromise(id: str ...

CSS Switchable Style Feature

I am in need of some assistance with the navigation on my website. You can find the current code at this link: http://jsfiddle.net/Sharon_J/cf2bm0vs/ Currently, when you click on the 'Plus' sign, the submenus under that category are displayed bu ...

Javascript in Chrome can be used to initiate and conclude profiling

Is there a way to activate the CPU Profiler in the Chrome developer window using a Javascript call? For example: chrome.cpuprofiler.start(); //perform intensive operation chrome.cpuprofiler.stop(); Currently, my only option is to manually click on "s ...

javascript - disable screen capture of specific parts of a webpage

Recently, I've come across certain web pages that have a unique feature preventing screen capture of specific regions. When attempting to take a screenshot using Chrome, some areas that are visible on the live page appear as black frames in the captur ...

Ajax fails to transmit information

Currently, I am in the process of familiarizing myself with the usage of ajax. An issue that I am encountering is that clicking a submit button in a form does not effectively send data. Below you can find the JQuery code I am using: $('input[name=" ...

Error: The if statement is not providing a valid output

I am currently developing a basic price calculator that calculates the total area based on user input fields. While most of the program is functioning correctly, I am encountering an issue with the if statement that is supposed to determine the price rat ...

Retrieving journal web addresses using the CORE API

I am currently working on pulling journal data from the CORE API in React, specifically focusing on obtaining the title and URL of each journal. My goal is to create clickable links that direct users to the specified URLs. { "identifiers": [ ...