How to access variables with dynamic names in Vue.js

I'm curious if it's possible to dynamically access variables from Vue’s data collection by specifying the variable name through another variable. For instance, consider the following example:

Here are some of the variables/properties:

var siteAdminVue = new Vue({
  el: "#siteAdmin",
  data: {
    tagtitle: "",
    tagparent: "",
    tagdesc: "",
    badgestitle: "",                    
    badgesdesc: "",               
    badgesprivilege: 0,                  
    newstitle: "",                    
    newsnotify: false,                  
    newscontent: "", 
}             

Now, let’s say I want to set some of these properties in one of my Vue methods:

var self = this;
var type = currentSection.toString().substr(4);
var selectElement = document.getElementById(currentSection + "select");

// Name of the Vue property, such as newstitle
var titleElement = type + "title";    

self.[titleElement]= selectElement.value;

Instead of using a switch statement to determine which property to set (newstitle, badgestitle, etc.), I am wondering if there is a way to store the property name in a variable and then use it to set the value. Is there a method to achieve this?

Thank you in advance!

Answer №1

Absolutely! Vue's data can be treated just like a traditional JavaScript object, allowing you to access and modify properties using dot or bracket notation.

If you haven't already, give it a try! Using

self[titleElement] = selectElement.value;
should get the job done perfectly.

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

Passing an array with pre-defined variables using jQuery's Ajax functionality

Currently, I have a function set up to gather the contents of a form and send it to a PHP page for processing. However, I am facing an issue where no data is reaching the PHP page when sending it via POST or GET methods. function add_new_customer(){ $ ...

The AJAX request fails to trigger following the onbeforeunload event except when the page is manually refreshed

I'm currently working on implementing a solution for handling the onbeforeunload event to display a custom message when the user tries to close the browser tab. I want a prompt like: Are you sure you want to leave this page? (I don't want to use ...

How should the directory be organized for the param with a prefix in Nuxt.js?

My route is set up as /en/rent-:productSlug How should I organize the directory for this route, considering that the parameter productSlug includes the prefix rent? ...

VueJS Unit Testing: Exploring the Content of Attributes- What to Test?

I'm currently facing some challenges with my initial VueJS unit tests using Jest. Although I grasp the concept and have already executed my first set of successful tests, I find myself pondering over the question of "What aspects should I test?" For ...

What criteria should I consider when selecting a JavaScript dependency framework?

When it comes to installing dependencies, how do I determine whether to use NPM or Bower? For example, what distinguishes npm install requirejs --save-dev from bower install requirejs --save-dev? Is there a recommended method, or any guidelines for makin ...

Ajax Complete adds Jquery two times in a row

I have a simple ajax complete call that is designed to add some text after an ajax load finishes. However, I'm encountering an issue where the information is sometimes displayed multiple times. I suspect there might be something missing in my approach ...

Refresh a row in real-time by utilizing a modal with JavaScript or jQuery

Is there a way to dynamically edit and update a previously submitted row (category name) in a table? I am able to edit a row by clicking on an edit button and displaying a modal with the current value. However, I am facing a challenge when trying to submit ...

What is the best approach for assigning initial values to data retrieved from Vuex?

My objective is to develop an 'edit account' form where users can update their account details. I aim to display the account information in a pre-filled form that includes fields like username, email, and address. Users will be able to make chan ...

The JavaScript for loop using .appendChild() is inserting the values of the final object, represented as [object object], into the HTML document

$(document).ready(function () { GetDetails(); }); function GetDetails() { let albumlist = document.getElementById("album-list"); $.ajax({ url: '/Store/browseajax', type: 'GET', data: { id: '@ ...

The absence of data in a c# web api controller is causing issues with jQuery AJAX post requests

When I am sending data to a c# web api controller, I use the following method: $.ajax({ type: "POST", url: "menuApi/menu/Cost", data: JSON.stringify(order), contentType: "application/json", success: function (data) { window.alert(&apo ...

The method this.$el.querySelector does not exist

The data retrieved from the database is inserted into the input fields and submitted as a form. This data is an object that passes the value to the database. However, when I trigger this form, an error occurs. See example of the error <input id=" ...

What is the hierarchy for displaying elements depending on the props?

I have developed a search input component that includes an icon which I want to reposition (either on the left or right side) depending on different scenarios. This input is part of a bootstrap input-group, so modifying the order of elements within my di ...

Is it impossible to generate a string exceeding 0x1fffffe8 characters in JSON parsing operations?

I am currently dealing with a JSON file that contains data of size 914MB. I am using the fs-extra library to load the file and parse it, but encountering an error during parsing: cannot create a string longer than 0x1fffffe8 characters Here is the code ...

"Dealing with an unspecified number of fields in an ExtJS data model

I have a data model that is designed to accommodate various incoming data by keeping it generic and allowing for the addition of multiple meta data tags to my project. How can I effectively map these data fields to the Model or access them in the array w ...

I am attempting to achieve a smooth transition effect by fading in and out the CSS background color using JQuery and AJAX

Can anyone help me with my issue related to using Ajax to fadeIn a background color in beforeSend and fadeOut in success? I seem to have made some mistakes but can't figure out what went wrong. var data={ ...

Tips on incorporating a hyperlink into an object imported through GLTF loader

Is there a way to include a hyperlink in the object loaded using gltf loader with the given code snippet below? var loader = new THREE.GLTFLoader(); var mesh; loader.load('globe.glb', function(gltf){ console.log(gltf); me ...

Modify the CSS class by adding attributes dynamically instead of directly to the element

I encountered a situation where I needed to apply a css property to a class rather than an element. For example: $('.class_with_css').css({display:'none'}); This code would add the style "display:none" to all elements with the cl ...

"Commitment made ahead of time without allowing for the outcome to

I'm completely new to working with promises and I'm encountering some unexpected behavior in my code. The issue lies in the TaskRunner.SyncObjects function within Main.js, which should be waiting for the selectedCourses variable to be populated ...

Issue with vuejs: npm run dev command not functioning

I'm facing an issue with running VueJS webpack on a server using the command: npm run dev. Instead of it running smoothly, I am getting a long list of errors. You can view the screenshot of the errors by clicking here. ...

What could be the reason for the container div's height not being properly refreshed?

When adding elements to a container div with an initial height of 'auto', I assumed that the height would adjust based on the children elements added. However, this is not happening. Can anyone assist me in ensuring that the container div's ...