Javascript和VueJS變量訪問

Question

我想從success Dropzone事件回調中訪問VueJS變量。 所有的代碼都可以，DropzoneJS & VueJS一起工作很好，但我的變量photos在成功回調中不可訪問。

下面是一個簡單的實現我的腳本：

<script> 
    import Dropzone from 'dropzone'; 

    export default { 
     data() { 
      return { 
       photos: [] 
      }; 
     }, 

     ready() { 
      Dropzone.autoDiscover = false; 

      new Dropzone('form#upload-form', { 
       url: '...', 
       success: function(file, response) { 

        this.photos = response.data.photos; 

        // this.photos is not accessible here 

       } 
      }); 
     } 
    } 
</script> 

是否有訪問VueJS組件變量最佳實踐這種方式？ 謝謝

Answer 1

您目前的做法，您可能有this參考的範圍問題。

我建議重新分配this外Dropzone實例和使用這樣的...

ready() { 
    Dropzone.autoDiscover = false; 

    const self = this; 

    new Dropzone('form#upload-form', { 
     url: '...', 
     success: function(file, response) { 

      self.photos = response.data.photos; 

      // this.photos is not accessible here 

     } 
    }); 
} 

Answer 2

在代碼中有一個與「此」參考範圍界定問題。我會建議使用箭頭函數，以便'this'的範圍是vue實例的範圍。成功功能可以寫成這樣的： -

ready() { 
    Dropzone.autoDiscover = false; 
    new Dropzone('form#upload-form', { 
     url: '...', 
     success: (file, response) => { 
      this.photos = response.data.photos; 
     } 
    }); 
} 

箭頭功能是ES2015的一部分。您需要使用babel將您的代碼編譯爲所有瀏覽器的兼容版本。你可以參考這個site兼容性問題

希望這會有所幫助！