What is the process for refreshing information in VueJS?

<script>
export default {
  data() {
    return {
      data: {},
      dataTemp: {}
    }
  },
  methods: {
    updateData() {
      let queries = { ...this.$route.query }
      this.data = {
        ...this.data,
        pID: queries.pid,
        sID: queries.sid
      }
      this.dataTemp = {
        ...this.dataTemp,
        pID: queries.pid,
        sID: queries.sid
      }
    }
  }
}
</script>

Upon updating this.data in the code snippet above, it will also affect the content of this.dataTemp.

However, one could argue that they are not directly dependent on each other.

I would appreciate an explanation regarding this issue. Thank you!

Answer №1

This code initializes empty objects for data and dataTemp. It's important to note that even though they are both objects, they are distinct - data !== dataTemp.

data() {
  return {
    data: {},
    dataTemp: {}
  }
}

If you invoke this.updateData(), both objects will be modified because we update both data and dataTemp. If you only want to modify data, you can adjust the method as follows:

updateData() {
  let queries = { ...this.$route.query }
  this.data = {
    ...this.data,
    pID: queries.pid,
    sID: queries.sid
  }
}

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

Leverage the power of i18n in both vuejs components and blade.php templates

Is it possible to use i18n in both blade.php and Vue.js views? I have set up a json file for i18n as shown below: export default { "en": { "menu": { "home":"Home", "example":"Example" } } } Using this i18 ...

Issue - The command 'bower install' terminated with Exit Status 1

During my journey through the angular-phonecat tutorial, a frustrating error popped up right after I executed the npm install command: I even checked the log file, but it just echoed the same error message displayed in the console. What's the piece o ...

Utilize the power of jQuery accordion to organize and display your table

Is there a way to integrate jQuery UI Accordion with an HTML table so that columns can be collapsible? I have tried various methods but haven't been successful. Currently, this is what I have implemented: $(".col1, .col2").addClass("hidden"); $(".s ...

Utilizing chrome.scripting to inject scripts in TypeScript

I am currently facing an issue wherein I am attempting to integrate chrome extension JavaScript code with TypeScript: const [tab] = await chrome.tabs.query({ active: true, currentWindow: true }); let result; try { [{ result }] = await c ...

What is the method to determine the overall size of a webpage using the Google PageSpeed API?

"analytics": { "cssResponseBytes": "333 kB", "htmlResponseBytes": "269 kB", "imageResponseBytes": "3.35 MB", "javascriptResponseBytes": "2.29 MB", "numberCssResources": 2, "numberHosts": 80, "numberJsResources": 72, "numberR ...

Looking for a way to locate any elements in jQuery that do not contain a certain CSS class?

I am looking to target all form elements that do not contain a specific CSS class. For example: <form> <div> <input type="text" class="good"/> <input type="text" class="good"/> <input type="text" class="bad"/> ...

Discover the method for retrieving the upcoming song's duration with jplayer

Hey there, I have a question regarding the jPlayer music player. Currently, I am able to retrieve the duration of the current song using the following code snippet: $("#jquery_jplayer_1").data("jPlayer").status.duration; However, I now want to obtain t ...

I am having trouble getting the filter functionality to work in my specific situation with AngularJS

I inserted this code snippet within my <li> tag (line 5) but it displayed as blank. | filter: {tabs.tabId: currentTab} To view a demo of my app, visit http://jsfiddle.net/8Ub6n/8/ This is the HTML code: <ul ng-repeat="friend in user"> ...

Navigating to the present child state with modified parameters can be achieved using the following steps

Check out this demo: https://jsfiddle.net/explorer/622qzqsc/ In the platform I'm working on, we have an advanced concept of state management, specifically for building timelines. In the template of this system, there's a code snippet (which is c ...

Ensure history.back() does not trigger Confirm Form Resubmission

Within my web application, every form submission is directed to an action folder. Once the process is complete, the user is redirected back to their original location. However, a problem arises when the user performs an action that requires the application ...

Tips for implementing circular icons with the vuetify component <v-icon></v-icon>

Looking to incorporate rounded material icons within the v-icon tag that is part of vuetify. I have explored various solutions on stackoverflow... <v-icon>announcement</v-icon> ...

Download a picture from a website link and transfer it to the IPFS network

Currently, I am facing an issue while attempting to fetch an image from a different website and then uploading it to IPFS using Next.js. Despite configuring CORS in next.config.js to enable the application to retrieve the image, everything seems to be func ...

Check for compatibility of overflow:scroll with mobile browsers

Is there an easy JavaScript method that works across different devices and libraries? I am looking to assign a class to the html element in order to enable scrollable containers on mobile devices when needed. I want to follow a similar approach to Modern ...

Mongoose: When encountering a duplicate key error (E11000), consider altering the type of return message for better error handling

When trying to insert a duplicate key in the collection, an error message similar to E11000 duplicate key error collection ... is returned. If one of the attributes is set as unique: true, it is possible to customize this error message like so: {error: ...

Successfully changing the source and tracking of a video through an onclick button, but the video content remains unchanged

I apologize if this post is a duplicate, but I couldn't find the answer in previous threads. I'm attempting to change the video source using an onclick button. However, even after changing the source, the video remains the same. <video width ...

Is there a way to retrieve the list of files from a static public folder using javascript?

I have successfully set up a public folder directory using express and node. For instance, this code works perfectly - var testImage = new Image(); testImage.src = '/images/png/avatar.png'; However, I need to access several images stored ins ...

Set a variable to represent a color for the background styling in CSS

My goal is to create an application that allows users to change the background color of a button and then copy the CSS code with the new background color from the <style> tags. To achieve this, I am utilizing a color picker tool from . I believe I ...

Tips for getting the sum of an array using the reduce method in Vue.js and returning the result array

As someone new to JavaScript, I apologize if my description of the issue is not clear. It's challenging for me to explain the problem I am facing. I have a computed function where I use the reduce method to iterate over my objects, perform calculatio ...

What is the proper way to utilize useRef with HTMLInputElements?

Dealing with React and hooks: In my code, there is a MainComponent that has its own operations and content which refreshes whenever the value of props.someData changes. Additionally, I have designed a customized InputFieldComponent. This component generat ...

Retrieve a Vue component by calling a function

As a newcomer to Vue, I am looking for a way to render an SVG icon based on task status and would like to create a reusable function for this purpose. How can I achieve this in Vue3? In React, I would typically approach this task with the following code: ...