Vuejs 动态访问数据值

Question

我不知道这是否是一个逻辑问题，但是，我有一个奇怪的问题或提出了一个奇怪的要求。我需要访问动态生成的变量的值。

  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
               }
           }
     }

Answer 1

您可以只嵌套括号符号，即this[fields[i]]。请参阅下面的概念验证：

// 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>

更好的是：您可以用于for...of现代浏览器，这避免了嵌套括号表示法的需要（提高可读性，如果有帮助的话）：

// 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>