Question

在 vuejs 或 javascript 中将字符串与此关键字一起使用

2018-03-16

272

javascript vue.js frontend

我有类似这样的代码。

  new Vue({
  el:'#app',
  data:{
    cars:[
      {
        name:'',
        make:''
      }
    ]
  },
  methods:{
    addToArray(nameOfTheArray){ //here nameOfTheArray is the string "cars"
      //so here I have to do something like this
      this.cars.push({
         name:'',
        make:''
      })
 }
  }
})

我的问题是，我可以使用那个参数（nameOfTheArray）来告诉我想要将此对象推送到哪个数组中吗？我的意思是像这样？

 this.nameOfTheArray.push({
         name:'',
        make:''
      })

但这不起作用。有没有办法将该字符串参数与此关键字一起使用？

Answer 1

使用这个：

  new Vue({
  el:'#app',
  data:{
    cars:[
      {
        name:'',
        make:''
      }
    ]
  },
  methods:{
    addToArray(nameOfTheArray){ 
      this[nameOfTheArray].push({
         name:'',
         make:''
      })
 }
  }
})

Answer 2

您可以通过 obj[key] 访问对象属性，同时检查对象中是否存在该键以避免运行时错误

new Vue({
  el:'#example',
  data:{
    cars:[
      {
        name:'',
        make:''
      }
    ]
  },
  methods:{
    addToArray(nameOfTheArray){
      if (nameOfTheArray in this) {
        this[nameOfTheArray].push({
         name: 'default name',
         make: 'default make'
        })
      } else {
        alert('Invalid key!')
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></script>

<div id="example">
  <button type="button" @click="addToArray('cars')">Add to cars</button>
  <button type="button" @click="addToArray('invalidKey')">Add invalidKey</button>
  
  {{ cars }}
</div>