Vue.js 访问父变量

Question

我有一个加载 Dropzone.js 的 Vue 组件。无法使用vue2-dropzone，因为它不允许附加到body。

我的组件看起来像：

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: {

    }
}

我想在 dragleave 上将 showUploader 更改为 true，但我不知道如何访问该变量。我真的迷路了。

Answer 1

您正在使用函数 () 语法，这意味着 this 在函数的上下文中，无法访问 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: {},
};

Vue.js 访问父变量

Vue.js access parent variable

dropzone.js

vue.js

vue-component