在Vue.js中动态访问嵌套数组时，push不是函数

问题描述

我想做的是，当用户上传一些数据时，会有2个按钮，一个是旧产品，另一个是新产品。 当用户单击其中任何一个按钮时，产品将使用“ old_product”或“ new_product”上传。 但是当我单击任一按钮时，都会出现此错误

_this.product[value].push is not a function

这是我的代码

<template>
  <div>
    <input type="file" class="product_upload" id="product_upload" @change="previewFiles">

    <button type="button" class="btn btn-primary" @click=uploadProduct('new_product')>New Product</button>
    <button type="button" class="btn btn-primary" @click=uploadProduct('old_product')>Old Product</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        product: {
          old_product: [],new_product: []
        }
      }
    },methods: {
      previewFiles(event){
        return event.target.files;
      },uploadProduct(value){
        let files = this.previewFiles;
        
        this.product[value].push(files);
      }
    }
  }
</script>

解决方法

它应该按以下方式工作：

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',data() {
    return {
      files: [],product: {
        old_product: [],new_product: []
      }
    }
  },methods: {
    previewFiles(event) {
      this.files = event.target.files;
    },uploadProduct(value) {


      this.product[value].push(this.files);
    }
  }
})

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>


<div id="app" class="container">

  <div>
    <input type="file" class="product_upload" id="product_upload" @change="previewFiles"/>

    <button type="button" class="btn btn-primary" @click=uploadProduct('new_product')>New Product</button>
    <button type="button" class="btn btn-primary" @click=uploadProduct('old_product')>Old Product</button>

    <pre>
  {{product}}
  </pre>
  </div>


</div>