I have noticed that you use jQuery to hide and show dialogs, however, it is recommended not to since it manipulates the DOM. Besides this, I couldn't even use the component since jQuery doesn't even load. Here is the error:
webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:17 [vue-router] Failed to resolve async component default: ReferenceError: jQuery is not defined
warn @ webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:17
webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:17 [vue-router] uncaught error during route navigation:
warn @ webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:17
webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1898 ReferenceError: jQuery is not defined
at eval (webpack-internal:///./node_modules/semantic-ui-css/semantic.min.js:11)
at Object../node_modules/semantic-ui-css/semantic.min.js (:8080/2.js:1969)
at __webpack_require__ (app.js:767)
at fn (app.js:130)
at eval (webpack-internal:///./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/semantic-kanban/src/semanticKanban.vue?vue&type=script&lang=js&:14)
at Module../node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/semantic-kanban/src/semanticKanban.vue?vue&type=script&lang=js& (:8080/2.js:115)
at __webpack_require__ (app.js:767)
at fn (app.js:130)
at eval (webpack-internal:///./node_modules/semantic-kanban/src/semanticKanban.vue?vue&type=script&lang=js&:2)
at Module../node_modules/semantic-kanban/src/semanticKanban.vue?vue&type=script&lang=js& (:8080/2.js:1923)
I am trying to use it in a Quasar Framework app.
Please see my recommendation about your component here, notice the comments about the use of jQuery in Vue. If possible make this Quasar Framework compatible or even a QF component. Quasar has all the dialogs, cards and things you need. A lot of developers consider jQuery deprecated because of modern approaches to reactive designs. This is a very nice component and I would like to see it go far.
Therefore, this issue is related to the use of jQuery instead of VueJS features, Vue actually doesn't want you to do exactly what you are doing; manually manipulate the DOM. Consider using v-show
or v-if
. Create or use QF dialogs instead of jQuery UI dialogs.
I noticed that your component is utilizing Semantic-UI-css to create dialogs. Anyway, the jQuery fact still remains. Do without it pliz. Consider doing this:
<div class="ui basic modal" v-show="showDialog">
....
</div>
// ...
data() {
return {
showDialog: false,
}
},
// ...
methods: {
show () {
// $(this.$el).modal('show')
this.showDialog = true
},
hide () {
// $(this.$el).modal('hide')
this.showDialog = false
},
}
see no need for jQuery there ๐คท๐ฝโโ๏ธ