How to dynamically update a variable by passing it inside an array in Vue.js

I am exploring ways to update variables dynamically in order to avoid using excessive switch statements. My initial approach was:

this.variable1 = 2
this.variable2 = 3

var array1 = [this.variable1, this.variable2]

And then later on:

array1[0] = 25
array1[1] = 12

console.log(array1[0]) //would output 25
console.log(array1[1]) // would output 12

Unfortunately, this is not the outcome that occurs, which is expected. But I am curious about how I can achieve dynamic variable updates. There must be a way, and I am determined to find it.

Answer №1

Here is a helpful resource that may address your inquiry: http://jsfiddle.net/yMv7y/3067/

let myArray;
let demoApp = new Vue({
  el: '#demo',
  data: {
    number1: 2,
    number2: 3
  },
  mounted() {
    myArray = [this.number1, this.number2]
  },
  methods: {
    examine() {
      myArray[0] = 25
      myArray[1] = 12

      console.log(myArray[0]) // will display 25
      console.log(myArray[1]) // will display 12
    }
  }
})

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

Vue-CLI: A Guide to Debugging Step by Step

I'm currently facing challenges in my Vue project that was created using the Vue CLI, particularly with the vue.config.js file. I am eager to set a breakpoint directly within the Vue CLI in order to debug and investigate the root cause of the issue. ...

Ways to dynamically incorporate media queries into an HTML element

Looking to make some elements on a website more flexible with media rules. I want a toolbar to open when clicking an element, allowing me to change CSS styles for specific media rules. Initially thought about using inline style, but it turns out media rul ...

InvalidAction: The function forEach cannot be applied to "res"

Here is the HTML code that I am currently working with: <div *ngIf="chart" class="col-xl-4 col-lg-6"> <div class="card cardColor mb-3"> <div class="card-header headColor"> <img class="img-fluid" src="../../../ ...

Node.js and Express: accessing req.body yields undefined value

In the midst of creating a basic browser application using Express, I encountered an issue when attempting to retrieve the value selected by a user from a dropdown menu. I assigned individual values to each option and set the form method to /post. However, ...

The ng-click function ceases to trigger after the $location dependency is included in the controller

I need some help with running a ng-click function from my controller. The strange thing is, when I don't use the $location dependency, the ng-click function works fine. But as soon as I add $location to the controller, the ng-click function stops work ...

When using the setTimeout function, jQuery's .submit() method may fail to pass data to PHP

I'm attempting to enhance the login form with an effect that triggers a 1-second delay before proceeding to PHP. I tried implementing a setTimeout() function within the .submit event handler along with e.preventDefault() to create the delay, but enco ...

What causes the "node: bad option" error to occur when I include a custom flag in the nodejs command line within an Angular 9 application?

Seeking assistance with adding a custom flag to the npm start command in an Angular 9 project. The goal is to intercept proxy requests within the local server and manipulate data. However, encountering the "node: bad option" error consistently. Looking for ...

Unable to access attributes of null (reading 'title) and other information

When the parameter 'edit=true' is present, I expect a form with pre-filled data to render; otherwise, redirect me. However, I am encountering an issue where I keep getting redirected and receiving a console error stating 'Cannot read propert ...

Implementing various event listeners for asynchronous JavaScript and XML requests (

Struggling to iterate through an ajax query and encountering a problem where the i value always defaults to 1. I'm not very well-versed in js so any suggestions on how to tackle this issue or possibly a better approach would be greatly appreciated. Th ...

The consistency of values remains constant throughout all Ajax requests

I am presenting the code snippet below: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" ...

The method getManyAndCount() in TypeORM does not include related data in its return result

I'm completely new to TypeORM and NestJs. Currently, I am working on a project where I have an entity called VehicleModel which has a ManyToOne relationship with VehicleBrand. However, when I execute getManyAndCount() on my query, I am puzzled as to ...

Show detailed information in a pop-up window

Javascript $(function() { var dmJSON = "clues.json"; $.getJSON( dmJSON, function(data) { var idx=1; $.each(data.details, function(i, f) { var myid = 'mypop'+String(idx); idx++; var $popup="<popu ...

Utilizing Squelize's junction table for forming new connections: a comprehensive guide

I am currently working with three basic tables: A, B, and C. The relationship between A and B is many-to-many, so I am using a junction table called A_B. Table C has a one-to-many relationship with the junction table A_B. In sequelize, this is how they are ...

Challenges with using the $.remove() function in jQuery

In simple terms... I am dealing with an element called clone. It's a div with various other tags nested within it. There is also a .x contained within it. My goal is to remove the .x and then append this modified element to another element. Unfortu ...

Trouble with Google Interactive Charts failing to load after UpdatePanel refresh

Desperately seeking assistance! I have spent countless hours researching this issue but have hit a dead end. My dilemma involves using the Google Interactive Charts API within an UpdatePanel to dynamically update data based on dropdown selection changes. H ...

Protect your Laravel and Vue SPA from CSRF attacks by securely storing the JWT token in an HttpOnly cookie

Frontend uses Vue.js for the single page application (SPA). The backend is built on Laravel framework. The frontend and backend are decoupled, communicating with each other through xhr requests. Initially, I stored the JWT token in local storage for aut ...

How does the 'this' variable function when it comes to models in embedded documents?

Being relatively new to node.js and sails, I find it quite easy to work with and enjoy it :) Currently, I am using the sails Framework version 0.10rc3 with MongoDB and sails-mongo. I understand that the contributors of waterline do not particularly like e ...

Navigating Information in the Response - Node.js

Currently, I am working on a node.js project that has grown significantly with numerous endpoints. As the project continues to expand, modifying the data within the responses for each endpoint has become quite cumbersome. I find myself constantly navigatin ...

Utilize async/await to send images using node mailer

How can I correctly access mailOptions in the triggerExample.ts file? mail.ts: export const sendNewMail = async (html: string, emails: string[]) => { let smtpTransport = nodemailer.createTransport({ service: "Gmail", auth: { u ...

Mastering EmberJS 2.7: The Definitive Guide to Binding the 'disabled' Attribute for Buttons

Here is an official guide explaining how to bind a boolean property to the disabled attribute of an HTML element. However, it references a controller in the process. I have a button that, when clicked, transitions the route (it must be a button and not a ...