этот. не определено внутри dropzone успешный обратный вызов vuejs2 - PullRequest
Новая
       12

этот. не определено внутри dropzone успешный обратный вызов vuejs2

0 голосов
/ 09 ноября 2018

Я использую Dropzone.js с Vuejs2. Однако загрузка файла работает нормально, внутри функции обратного вызова success я не могу назначить ответ объекту родителя.

Вот пример моей реализации: 

<script>
    import vueDropzone from "vue2-dropzone";

      export default {
        components: {
          vueDropzone
        },
        props: {
        },
        data: () => ({
            data: {
              name: ''
            },
            dropOptions: {
                url: "https://httpbin.org/post",
                maxFileSize: 10,
                autoProcessQueue: false,
                success: (file, response) => {
                if (response.message == "success"){
                  this.data.name = response.name;                
                  this.add();
                }
                else{
                  console.log('Error Uploading file');
                }
           }
       }),
     };
</script>

ошибка:

Uncaught TypeError: Невозможно установить свойство 'name' из неопределенного

Я попробовал найденные решения Здесь , но он все еще не работает.

Ответы [ 2 ]

0 голосов
/ 09 ноября 2018

Глядя на документацию , вы неправильно ее используете.

dropOptions должен содержать только его конфигурацию , а не события.

Вам необходимо использовать vue-2-dropzones events , в вашем случае vdropzone-success(file, response), поэтому: 

<vue-dropzone
  ref="myVueDropzone"
  id="dropzone"
  :options="dropOptions"
  v-on:vdropzone-success="someSuccessMethod">
</vue-dropzone>

...
data() { /* ... */ },
methods: {
  someSuccessMethod(file, response) {
    // your logic
  }
}
0 голосов
/ 09 ноября 2018

Это просто не работает, потому что this привязан к другому объекту, чем вы думаете. Это ошибка по умолчанию, когда люди переключаются или изучают JavaScript.

dropOptions - это объект. this в функциях success относится к объекту dropOptions, а не к его родительскому объекту.

Итак, dropOptions не имеет поля data, следовательно, undefined, и вы не можете получить доступ к name.

См .: доступ к родительскому объекту в javascript

РЕДАКТИРОВАТЬ: Для дальнейшего изучения, пожалуйста, предоставьте код того, что вы сделали с ссылкой, которую вы опубликовали. Это, кажется, идет в правильном направлении, но из простого «не работает», мы не можем сказать вам, что еще вам нужно иметь в виду.

...