在 Vue.js 中動態訪問嵌套數組時，push 不是 function

Question

我要做的是當用戶上傳一些數據時，會有 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>

Answer 1

它應該如下所示工作：

 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>