changing the value of a global variable from inside a function

Currently, I am working with Vue in an attempt to assign values to checkboxes. Below is the code snippet:

let variable = false;

export default {
  name: "nyle-home",

  created() {
      this.notifstate = this.$route.params.data[0].state;
      variable = this.notifstate;
      console.log(variable); //outputs true
  },
  data() {
    return {
      weather: {
        state: variable,
        number: "",
      },
      submitted: false
    };
  },
};

My goal is to assign the value of the 'state' property to the updated value of 'variable' after the 'created()' method executes, which is true. However, currently, the code is associating 'state' with the initial value of 'variable', which is false. How can I ensure that 'state' reflects the updated value of 'variable' post 'created()'?

Answer №1

To set your data, you can directly assign it in the 'created' hook:

  created() {
      this.userData = this.$route.params.data[0].info;
      infoValue = this.userData;
      console.log(infoValue); //prints out the value
      this.personalInfo.value = this.userData;
  },

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

My React app is experiencing connectivity issues with the proxy server linking to my Express server

Currently, I have both my React app running on port 3000 and my Express server on port 4000 on the same local machine. Within my React app, I utilize the fetch API to send registration form data to my Express server at the '/register' route- con ...

Generated Form Data Automatically

Seeking advice on achieving a specific functionality in ASP.NET Web Form that is similar to the AutocompleteExtender, but requires more flexibility. Here is what I aim to accomplish: There are 2 TextBox fields on the form: CompanyName and CompanyRef (a u ...

Resolving the active tab problem within Angular 2 tab components

Can anyone assist in resolving the active tab problem within an angular 2 application? Check out the Plunker link I am using JSON data to load tabs and their respective information. The JSON format is quite complex, but I have simplified it here for cla ...

JavaScript taking over the HTML footer content

I'm attempting to update the content of my footer without modifying the HTML by including a class or an id. HTML: <footer> <div> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div> </footer> Java ...

"Error 404: Invalid request encountered while using React and

I am encountering an issue with a 404 not found error when I attempt to send a post request in React. My code involves using Django Rest Framework on the backend and React Axios on the frontend, but I am facing errors while making the post request. Below i ...

Is there a way to enclose an element with two other elements using JavaScript/jQuery

Is it possible to create a wrapping element for content located between two existing elements? Here's a code snippet to illustrate: <p> Some text some text <span class="foo">some more text</span> additional text. </p> <p> ...

``After initialization, the service is unable to retrieve the object as

I have a special service that stores specific objects to be shared among different controllers. Here is an example of the code I am using: $rootScope.$on('controller.event', function(event, arg){ self.backendConnectorService.getBac ...

Is it recommended to create model classes in React components?

Within the realms of React, the Flux architecture is utilized. According to https://reactjs.org/docs/thinking-in-react.html, React operates with two distinct models - namely, the state and props. There are recommendations provided for model management in ...

"Step-by-step guide on populating a select box with data from the scope

Hey everyone, I'm new to using Angular and hoping for some help with a simple question. I've created a form (simplified version below) that I want users to see a live preview as they fill it out. Everything was going smoothly with regular field ...

Activation of navigation buttons in the Vue Full Calendar control the movement to the next and previous

In my current project, I am utilizing https://www.npmjs.com/package/vue-full-calendar. However, I have encountered an issue when trying to receive callbacks or triggers from the next and previous buttons on the calendar. My backend API is structured aroun ...

The issue with Angular's mat-icon not displaying SVGs masked is currently being investigated

I have a collection of .svgs that I exported from Sketch (refer to the sample below). These icons are registered in the MatIconRegistry and displayed using the mat-icon component. However, I've observed issues with icons that utilize masks in Sketch ...

Incorporating text onto an HTML webpage

Context: My program reads a file and displays it on an HTML page. The code below utilizes regex to extract errors from the file. Instead of using console.log for debugging, is there a way to display the results on the HTML page? When attempting: document ...

Incorporate audio playback on image click using JavaScript, with the feature to automatically pause the playback if multiple images are playing simultaneously

<img class="cl" src="photo/198.jpg"/></br> <audio class="cs" controls> <source src="audio/198 banu nagamothu.mp3" type="audio/mpeg"> </audio> I prefer not to have audio controls initially, but when the image i ...

Showing RSS feed on Vue.js interface

I am trying to integrate a Google Alert feed into my Vue.js application, specifically on the "Dashboard.vue" component using "Feed.vue". I have successfully implemented this feature in JavaScript, but I am facing difficulties converting it to Vue.js. Curr ...

retrieving information from a data attribute

When setting a data attribute for a user on a link, the code looks like this: <input type="button" class="btn" data-user={"user": "<%= @user.name %>"} value="Start" id="game"> Upon listening for the click event in the JavaScript function, co ...

Generating a JSON data set with two separate pieces of data, not contained within a dictionary

Within my application, there exists an HTML table that is dynamically generated using the following code: function generateTableRow() { var emptyColumn = document.createElement('tr'); emptyColumn.className ='data'; emptyColumn.inne ...

What is the best way to show a nested div element within a v-for loop in Vue.js?

One interesting feature of my coding project is that I have an array nested within another array, and I iterate through them using two v-for loops. The challenge arises when I try to display a specific div in the second loop only upon clicking a button. ...

The Formik form is not being populated with data from the API

While working on a functional component in ReactJS, I created a simple form using Formik. The input fields in my form are supposed to fetch data from an API when the component mounts. To achieve this, I utilized fetch and useEffect. However, after fetching ...

Learn how to use Vue to check for loaded resources such as initiators and assets. If all resources are loaded, the console will display "all resources done

What is the method to check if loading a resource (initiator, assets) returns a console.log("all resources done")? Click here for image description ...

What is the best way to extract a certain property from a JSON string using JavaScript?

Can you guide me on how to extract the value of agent_code from this string using JavaScript? Additionally, could you please provide an explanation of the underlying logic? Abridged JSON Data: [{"name":"NYC","zone_id":"1","totalagents":"40","agents":[{ ...