[Vuejs]-How pass data from component to external js file

by

0👍

✅

A more general solution would be for the component to pass in a success-event handler that has access to the component’s data and methods, as shown below. This solution decouples the configuration from the component’s internals.

dropzoneConfig.js:

export const dropzoneConfig = ({ onSuccess }) => ({
  //...
  success(file, xhr) {
    //...
    onSuccess(xhr.data)
  }
})

App.vue:

<script>
import Dropzone from 'dropzone'
import { dropzoneConfig } from './dropzoneConfig'

export default {
  data() {
    return {
      entry: {
        files: []
      }
    }
  },
  created() {
    Dropzone.options.myComponent = dropzoneConfig({
      onSuccess: fileData => this.onDropzoneSuccess(fileData)
    })
  },
  methods: {
    saveNote() {
      //...
    },
    onDropzoneSuccess(fileData) {
      this.entry.files.push(fileData)
      this.saveNote()
    }
  }
}
</script>

Leave a comment