Vue.js access variables with indefinite name

Question

I wanted to know if it's possible to access variables from vue's data collection, but only by specifying the variable name through another variable. This is what I mean:

Some of my variables/properties:

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

And now I want to set some of these properties in one of my methods in vue:

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

  // name of vue property, for example newstitle
  var titleElement = type + "title";    

  self.[titleElement]= selectElement.value;

I don't want to use a switch statement to check if I need to set newstitle, badgestitle and so on, so I thought I could store the name in a variable which is already defined in vue and then set it. Is there a way to do this?

Thanks in advance

Eric Guan · Accepted Answer · 2017-03-24T17:08:40.677

10

Sure, you can treat Vue's data as a js object, meaning you can get and set properties through dot/bracket notation.

Have you tried it? self[titleElement]= selectElement.value; should work.

edited Mar 24 '17 at 17:08

answered Mar 24 '17 at 15:21

Eric Guan

15,474
8
50
61

No, that will not work. `self[titleElement]` should work. – Bert Mar 24 '17 at 16:07
You're right, that is a typo. Fixed it. – Eric Guan Mar 24 '17 at 17:09
Oh that worked. Needed to change a little bit but it really worked like that. The dot was my mistake. Thank you! – Blade Mar 24 '17 at 19:27

Vue.js access variables with indefinite name

1 Answers1