JavascriptとVueJSの可変アクセス

Question

success DropzoneイベントコールバックからVueJS変数にアクセスしたいと思います。 すべてのコードはOKです。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の参照で有効範囲の問題が発生している可能性があります。

私はあなたのコードでは...

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

をDropzoneインスタンス化のthis外を再割り当てし、そのようにそれを使用することをお勧め「これ」を参照してスコープの問題があります。私は矢印関数を使用して 'this'のスコープをvueインスタンスのスコープにすることを提案します。成功関数は次のように書くことができます。 -

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

arrow関数はES2015の一部です。すべてのブラウザで互換性のあるバージョンにコードをコンパイルするには、babelが必要です。互換性の問題については、siteを参照してください。