No sé si esta es una pregunta lógica, sin embargo, tengo un problema extraño o digo un requisito extraño. Necesito acceder al valor de una variable generada dinámicamente.
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 } } }Simplemente puede anidar la notación de corchetes, es decir, this[fields[i]] . Vea la prueba de concepto a continuación:
// 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> Aún mejor: puede usar for...of para navegadores modernos, lo que evita la necesidad de una notación de corchetes anidados (mejora la legibilidad, si ayuda):
// 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>