Is there a way for me to retrieve the variables saved within this array in JavaScript (vue.js)?

I'm currently working on a project involving the JavaScript Vue.js Framework. I've encountered an issue that I need help with, and I've included some code below to illustrate my problem. In the code, I have two variables in the data section that don't have values assigned to them. My goal is to update these variables within a method.

I've initialized an array called "counter" to store two number values.

Prior to running the for loops to modify the variables, I stored the values of variables (a and b) from the data section in an array named "values" using "this".

However, I'm facing a challenge in accessing the variables a and b when they are stored in the "values" array. I suspect that the issue lies with the "values" array. If I change values[i] in the last for loop to "this.a", it works fine. But, I'm unable to access the variables stored in the array.

This seems like a JavaScript-related issue, and I'm not sure how to resolve it. I've tried looking for similar problems on Stack Overflow but haven't been able to apply the solutions to my specific case.

// Vue.js Model Section

data: {
   a = '';
   b = '';
}

//Snippet from the method section
var one = 13;
var two = 14;

counter = [one, two];
values = [this.a, this.b];

for(var i = 0; i < counter.length-1; i ++){
    for(var position = 0; position < counter[i]; position ++){
        values[i] += "*";
};

Answer №1

Since a and b are strings, their values are copied into the values array. Therefore, when iterating over and modifying values[i], you are only changing copies of their values in the values array. To make changes directly to this.a and this.b, you should modify them directly or encapsulate them in a function that modifies their values directly.

 var functionToChangeAandB = (val1, val2) => {
  this.a = val1
  this.b = val2
}

functionToChangeAandB('one', 'two')

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

Experiencing complications when retrieving API information in my React component

There is a json file available: {"area":[{"id":"1","name":"abc","address":"223 "},{"id":"2","name":"xyz","address":"123 "}] I am trying to fetch and display the data in my component using react and redux. Although I have successfully loaded the url with ...

Lazy Loading fails to deliver for Ajax Requests

I recently integrated lazy loading following David Walsh's advice (tip 1) and it initially worked perfectly. However, I encountered an issue when the images were filtered and reloaded with an ajax request. The website is built on Rails, and the images ...

When utilizing Reactjs, accessing an element by its id becomes challenging when the element is nested within a map() function

Currently, I am encountering an issue related to reactjs. In my scenario, I have a requirement to compare the height of the screen with a specific div to determine its maximum width. The challenge lies in the fact that the particular div I need to analyz ...

What could be the reason for this JSON being considered "invalid"?

Despite passing validation on jsonlint, both Firefox and Chrome are rejecting this JSON: { "messages": [ { "subject": "One" }, { "subject": "Two" }, { "subject": "Three" ...

What could be causing the Error 400 message to appear when trying to upload a JSON file via an HTTP request?

This Code Snippet is Essential function makeRequest() { var dataToSend = { "username": "234zu", "subject": "qwertz", "content": "qw", "created_at": "2018-12-15 22:18:54", "updated_at": "2018-12-15 22:18:54" ...

Uncovering the Secrets of Accessing Tag Attributes in ReactJS

I have developed a small app using reactjs. I have set an attribute on the button tag and passed a value to it. Now, when I click on the button, I want to retrieve the attribute value. How can I achieve this with react js? Here is a sample code snippet: ...

Is it possible to encase <v-img> within an anchor element?

I am currently using Vuetify 1.5 and have included a couple of <v-avatars></v-avatars> elements in which there is a nested <v-img></v-img>. I attempted to enclose the img tags within an a tag but encountered an issue wherein the ima ...

Why isn't my callback working? Can anyone help me figure out what I did wrong?

I'm currently facing an issue while making an asynchronous call to Redis and attempting to utilize a callback to inform async.js about the completion of the query. I am consistently receiving an error message stating "callback is not a function". Can ...

Passing reactive chart options in Vue.js using Chart.js

After carefully following the author's documentation, I was able to successfully create a reactive chart similar to the sample provided in the documentation. Below are snippets from both a JavaScript file and a Vue file: // Chart.js file import { ...

Using JSON data to populate a select menu in AngularJS using the ng-options directive

UPDATE: I have successfully resolved my issue. Thanks for the assistance, everyone. I am working with an array of JSON objects that are structured like so: [{"id":"id1", "text":"text1"}, {"id":"id2", "text":"text2"},....] My goal is to populate an Angul ...

Unable to fetch Title from Strapi

I have a collection type named posts with the following values: https://i.sstatic.net/49OeV.png To access the API, I have a file in my lib folder that contains the following code: export async function getPosts() { var api_base_url = process.env.API_BASE ...

Sorting prices in descending order using Expedia API

Is there a way to arrange prices in descending order using the response.hotelList[i].lowRate? The provided code is as follows: success: function (response) { var bil = 1; var hotel_size = response.hotelList.length; $('#listD ...

Customizing style with state using react and styled-components

As a newcomer to react and styled-components, I find myself in a bit of a mess due to my lack of understanding of how it all functions. Let's start from the beginning. I have a basic page (App.js) that displays two components called "Knobs". Each &ap ...

Encountered an error: Object(...) does not conform to function standards in the handleChange method

When using JavaScript, everything works fine. However, when trying to implement TypeScript with the handleChange function, an error is consistently thrown whenever something is typed into the entries. The error message reads: "TypeError not captured: Objec ...

Generating a logout option upon logging in and a login option upon logging out

Once a user logs in, the state (isLogin: false) is updated to true. If the RouterLink in the header.vue has v-if="$store.state.isLogin === false" bound to it, the login router should be visible. Conversely, if $store.state.isLogin === true, the logout bu ...

Transition effect does not work properly when using ng-hide

I am currently working on an application that requires a button to be clicked in order to hide or show a specific element. To achieve this functionality, I am using ng-hide in AngularJS, but I am facing an issue where the transition is not working as expe ...

What's the best way to refactor the `await nextEvent(element, 'mousemove')` pattern in my code once it is no longer necessary?

Within my React component, the code includes the following: class MyComponent extends React.Component { // ... trackStats = false componentDidMount() { this.monitorActivity() } componentWillUnmount() { this.trackStat ...

Securing Codeigniter with CSRF protection while using datatables and an AJAX URL

I am currently utilizing codeigniter and have implemented CSRF protection. We have enabled it using the following configuration: $config['csrf_protection'] = TRUE; For form submission, we are using the following code: `<input type="hidden" ...

Issue with VueJS where the datalist input does not reset the value

I am currently working on a Vue component that scans QR codes and adds information to a database upon successful scanning. The scanning process works perfectly fine. However, after successfully sending the data, I need to clear the input field in my datali ...

Creating a collapsing drop down menu with CSS

I utilized a code snippet that I found on the following website: Modifications were made to the code as shown below: <div class="col-md-12"> ... </div> However, after rearranging the form tag, the drop-down menu collapse ...