Как передать данные из компонента во внешний файл js - PullRequest
Новая
       17

Как передать данные из компонента во внешний файл js

0 голосов
/ 16 февраля 2020

Я хочу использовать данные моего компонента в моем внешнем файле JavaScript, содержащем мою конфигурацию Dropzone. Я безуспешно пытался использовать Function.prototype.bind: 

export const dropzoneConfig = {
    url: api.http.baseUrl + '/files',
    thumbnailWidth: 150,
    maxFilesize: 5,
    acceptedFiles: 'image/*',
    addRemoveLinks: true,
    sending: function (file, xhr, formData) {
        formData.append('type', 'photo');
    },
    success: function (file, xhr) {
        file.id = xhr.data.id;
        if (this.entry.files === undefined) {
            this.entry.files = [];
        }
        this.entry.files.push(xhr.data);
        this.saveNote();
    }.bind(this),
    headers: api.http.authHeaders().headers
};

В приведенном выше коде this.entry и this.saveNote недоступны, поскольку они из моего Vue компонента. Как мне сделать их доступными для внешнего файла?

1 Ответ

0 голосов
/ 17 февраля 2020

Более общим решением было бы передать компоненту обработчик события success, который имеет доступ к данным и методам компонента, как показано ниже. Это решение позволяет отделить конфигурацию от внутренних компонентов компонента.

dropzoneConfig. js: 

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

Приложение. 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>
...