Composant personnalisé VueJS

Question

J'ai besoin d'ajouter à mon composant jquery cropit plugin. J'ai donc ajouté cropit à mon package.json et installer

prochaine j'ai essayé

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

et

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

mais ne fonctionne pas

sortie de la console chromée

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

Il semble que t Le plugin cropit n'est pas compatible avec les versions jQuery 3.0 et supérieures pour le moment. Découvrez ce problème sur github.

J'ai installé jQuery 2.1 et n'a trouvé aucune erreur dans ma console:

<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>