Vuejs Access data values dynamically

Question

I don't know if this is a logical question, however, I have a weird issue or say a weird requirement. I need to access the value of a dynamically generated variable.

 data:{
 brand: undefined,
 model: undefined
 }
 
 methods:{
 check(){
 let fields = ['brand', 'model'];
 for(let i in fields){
 console.log(`this.${fields[i]}`) // I need this to access the field values
 }
 }
 }

• prakashchhetri: @Saniyasyedqureshi it would give me the values in fields array. Thats not what I need. I need to access the data values eg. this.brand and this.model
• Terry: Just use bracket notation, i.e. this[fields[i]].
• prakashchhetri: @Terry thanks a lot. Never thought it would be as easy as that. Can you post it as an answer?
• Terry: Sure thing :) glad that it helped. I can also recommend you use for...of, if it makes things a bit more readable/understandable

Answer 1

You can just nest the bracket notation, i.e. this[fields[i]]. See proof-of-concept below:

// Suppress annoying console.info
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
 el: '#app',
 data: {
 brand: 'foobar brand',
 model: 'acme model'
 },
 methods: {
 check() {
 let fields = ['brand', 'model'];
 for (const i in fields) {
 console.log(this[fields[i]]);
 }
 }
 }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"><button type="button" @click="check">Check button</button></div>

Even better: you can use for...of for modern browsers, which avoids the need of a nested bracket notation (improves readability, if it helps):

// Suppress annoying console.info
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
 el: '#app',
 data: {
 brand: 'foobar brand',
 model: 'acme model'
 },
 methods: {
 check() {
 let fields = ['brand', 'model'];
 for (const field of fields) {
 console.log(this[field]);
 }
 }
 }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"><button type="button" @click="check">Check button</button></div>