时间戳

首页 > 解决方案 > Vue - 从回调将数组推入嵌套数组

vue.js - Vue - 从回调将数组推入嵌套数组

问题描述

我在组件中将图像编码为 base64 格式，然后尝试将对象推送到数组中。

基本上是集合项目>集合项目图像

<base64 :index="index" :multiple="true" :done="getFiles"></base64>

colItems: [
 {
   id: '1',
   title: 'Title 1',
   subTitle: 'Subtitle 1',
   colItemImgs: [],
  },
],

methods: {
    // Add images to ColItem
    getFiles(files) {
        console.log(files)
        this.colItems.colItemImgs.push(...files)
    },
}

我正在尝试使用索引将它们专门添加到正确的对象中。但是还没有弄清楚如何通过回调将索引传回。

谢谢你的时间

Base64 组件

 <template>
  <div>
    <v-btn raised @click="onPickItemFile(index)">base64</v-btn>
    <input type="file" @change="onChange" :multiple="multiple" 
     style="display: none" ref="foobar_y" />
   </div>
 </template>

<script>
 export default {
 props: {
  multiple: {
    default: false,
    type: Boolean,
  },
  done: {
    type: Function,
    default: () => {}
  },
  index: '',
},
methods: {
  onChange(e){
    // get the files
    let files = e.target.files;
    // Process each file
    var allFiles = []
    for (var i = 0; i < files.length; i++) {
      let file = files[i]
      // Make new FileReader
      let reader = new FileReader()
      // Convert the file to base64 text
      reader.readAsDataURL(file)
      // on reader load somthing...
      reader.onload = () => {
        // Make a fileInfo Object
        let fileInfo = {
          name: file.name,
          type: file.type,
          size: Math.round(file.size / 1000)+' kB',
          base64: reader.result,
          file: file
        }
        let index = this.index
        // Push it to the state
        allFiles.push(fileInfo)
        // If all files have been proceed
        if(allFiles.length == files.length){
          // Apply Callback function
          if(this.multiple) this.done(allFiles)
          else this.done(allFiles[0])
        }
      } // reader.onload
    } // for
  }, // onChange()
  onPickItemFile (index) {
    this.$refs.foobar_y.click()
  }, 
  }
 };
</script>

标签： vue.js

解决方案

colItems 是一个数组，例如，a = [1,2,3,4]如果要访问数组中的特定元素，则需要提供该元素的索引，例如a[0] // result-> 1. 所以colItemImgs您的方法无法访问。找到您要使用的元素的索引并通过上述方法使用它。

推荐阅读