VueJS benutzerdefinierte Komponente

Question

Ich muss hinzufügen, um meine Komponente jquery cropit plugin. So habe ich cropit meiner package.json und installieren

nächstes versuchte ich

<template> 
    <div id="image-cropper">...</div> 
</template> 

und

import 'cropit' 
export default{ 
    mounted: function(){ 
     $('#image-cropper').cropit({ 
      imageState: { 
       src: 'http://lorempixel.com/500/400/', 
      }, 
     }); 
    } 
} 

aber funktioniert nicht

Chromkonsole Ausgabe

Uncaught TypeError: Cannot read property 'push' of undefined at Cropit.init (eval at (app-d1eddf4073.js:2440), :274:41)
at new Cropit (eval at (app-d1eddf4073.js:2440), :194:11)
at HTMLDivElement.eval (eval at (app-d1eddf4073.js:2440), :102:21)
at Function.each (eval at (app-d1eddf4073.js:176), :368:19)
at jQuery.fn.init.each (eval at (app-d1eddf4073.js:176), :157:17)
at jQuery.fn.init.init (eval at (app-d1eddf4073.js:2440), :96:18)
at jQuery.fn.init._jquery2.default.fn.cropit (eval at (app-d1eddf4073.js:2440), :147:26)
at VueComponent.mounted (eval at (app-d1eddf4073.js:1565), :65:29)
at callHook (eval at (app-d1eddf4073.js:2428), :2758:19)
at Object.insert (eval at (app-d1eddf4073.js:2428), :1769:5)

Answer 1

Es scheint so t cropit Plugin ist derzeit nicht mit jQuery 3.0 und höher kompatibel. Überprüfen Sie diese Ausgabe auf github.

Ich installierte jQuery 2.1 und hat keine Fehler in meiner Konsole gefunden:

<template> 
    <div class="cropit"> 
    <div id="image-cropper"></div> 
    </div> 
</template> 

<script> 

import cropit from "cropit" 
import $ from "jquery" 

export default { 
    name: 'cropit', 
    mounted: function() { 
    $('#image-cropper').cropit(); 
    } 
} 
</script>