Vue-从嵌套组件中拉回索引以推送到数组

时间:2019-02-18 01:48:08

标签: vue.js vuetify.js

我在组件中将图像编码为base64,然后将其推入相关数组。

父组件

<v-tab-item v-for="(item, index) in colItems" :key="index">

 <base64 :index="index" :multiple="true" :done="getFiles(index)"> 

colItems: [
  title: '',
  colItemImgs: '',
]

简化的子组件

  <div>
    <v-btn raised @click="onPickItemFile(index)">base64</v-btn>
    <input type="file" @change="onChange" style="display: none" ref="64input" />
  </div>
<script>
  export default {
    props: {
    done: {
      type: Function,
      default: () => {}
    },
    index: '',
  },
  methods: {
    onChange (e) {
     // Removed base64 reader images for simplification

     let files = e.target.files;

           let fileInfo = {
              name: file.name,
              type: file.type,
              size: Math.round(file.size / 1000)+' kB',
              base64: reader.result,
              file: file
           }
           let index = this.index

           allFiles.push(fileInfo)

           if(allFiles.length == files.length){

              if(this.multiple) this.done(allFiles)
              else this.done(allFiles[0])
           }
        } 
     } 
  }, 
  onPickItemFile (index) {
    this.$refs.base64Input.click()
  }, 

我的问题是,我需要在现有数组中添加和删除img,但是无法将索引返回到父组件。

任何可以提供帮助的人,将不胜感激! 提前致谢。

0 个答案:

没有答案