2017-03-02 20 views
5

मैं success ड्रॉपज़ोन ईवेंट कॉलबैक से एक VueJS चर का उपयोग करना चाहता हूं। सभी कोड ठीक है, DropzoneJS & VueJS एक साथ ठीक काम करता है, लेकिन मेरा चर photos सफलता कॉलबैक में उपलब्ध नहीं है।जावास्क्रिप्ट और VueJS परिवर्तनीय पहुंच

<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 घटकों चर के लिए एक सबसे अच्छा अभ्यास इस तरह से:

यहाँ मेरी स्क्रिप्ट का एक सरल कार्यान्वयन है? धन्यवाद

उत्तर

5

वर्तमान में आप इसे कैसे कर रहे हैं, तो आपको this संदर्भ के साथ एक स्कोपिंग समस्या हो सकती है।

मैं Dropzone इन्स्टेन्शियशन की this बाहर फिर नियत और इतने की तरह है कि उपयोग करने का सुझाव ...

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 

     } 
    }); 
} 
1

अपने कोड में वहाँ 'इस' संदर्भ के साथ एक scoping मुद्दा है। मैं तीर फ़ंक्शन का उपयोग करने का सुझाव दूंगा ताकि 'इस' का दायरा vue उदाहरण का हो। सफलता समारोह को इस तरह लिखा जा सकता है: -

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

तीर फ़ंक्शन ES2015 का हिस्सा है। आपको अपने कोड को सभी ब्राउज़रों के लिए एक संगत संस्करण में संकलित करने के लिए बेबेल की आवश्यकता होगी। आप site को संगतता समस्याओं के लिए संदर्भित कर सकते हैं

आशा है कि इससे मदद मिलती है!

संबंधित मुद्दे