Блог

У меня есть компонент Vue, который я загружаю Dropzone.js . Невозможно использовать vue2-dropzone, потому что он не позволяет подключаться к телу.

Мой компонент выглядит так:

 export default {
    props: [
        'maxsize',
        'csrf',
        'url'
    ],
    data() {
        return {
            showUploader: false,
            dropZone: {},

            dropzoneOptions: {
                url: this.url,
                success: function (file, response) {
                    console.log(file.filename   ' '   response);

                },
                error: function (file, response) {
                    console.log(response);
                    return false;
                },
                dragleave: function () {
                    var dragOver = document.getElementById('dragOver');
                    dragOver.classList.add('hidden');
                    this.showUploader = true;
                }
            },
        }
    },
    mounted() {
        this.dropZone = new Dropzone(document.body, this.dropzoneOptions);
    },
    methods: {

    }
}
  

Я хочу изменить значение showUploader на true on dragleave , но я не знаю, как получить доступ к переменной. Я действительно потерян.

Вы используете синтаксис function (), который означает, что это находится в контексте функции и не может получить доступ к this.showUploader

Измените функцию на функцию со стрелкой, и это решит проблему

 export default {
  props: ["maxsize", "csrf", "url"],
  data() {
    return {
      showUploader: false,
      dropZone: {},

      dropzoneOptions: {
        url: this.url,
        success: function (file, response) {
          console.log(file.filename   " "   response);
        },
        error: function (file, response) {
          console.log(response);
          return false;
        },
        dragleave: () => {
          var dragOver = document.getElementById("dragOver");
          dragOver.classList.add("hidden");
          this.showUploader = true; // this.showUploader will access the Vue object
        },
      },
    };
  },
  mounted() {
    this.dropZone = new Dropzone(document.body, this.dropzoneOptions);
  },
  methods: {},
};