Marcin Luczak staff commented 3 years ago

Beside calling alert.hide() instead of alrt.hide() in the first example, your code is fine. However, it will not work as Alert is a pro component and you are referencing the free version of our package. Does this also apply to your local application?

BigMonkey pro commented 3 years ago

Ah yes that was it, didn't realize even the base bootstrap Alert functionality, like show/hide, was a Pro feature. Seemed like the simplest component to test installation with.

Marcin Luczak staff commented 3 years ago

I'm glad that we've found the cause of the issue :)

Keep coding, Marcin

BigMonkey pro commented 3 years ago

Please read what I posted, I'm using Vanilla JS version of MDB inside Vue. There's some issue causing a problem I'm describing in this thread.

Plain javascript, as Vanilla JS is supposed to be, should work inside Vue but something is preventing it from working correctly. Using the Alert example I can create the Alert object but calling any Alert methods on that object results in "is not a function"

Eg:

testClick() {

const a = new mdb.Alert(document.getElementById('examplealert'));

a.show();

// Uncaught TypeError: a.show is not a function

}

Marcin Luczak staff commented 3 years ago

Hi,

You are right that plain JS should work properly inside the Vue application, but this will be 100% true only for your own code, written specifically for your own application. We, then, cannot guarantee that all components from the MDB Standard version, especially more advanced and complex ones will work with Vue directly, as they weren't written with Vue in mind and they might not be compatible with Vue syntax and its reactivity system. That's why the Vue version of MDB5 components is made, and we recommend using it for Vue applications.

I've checked your code for Alerts on the clean setup of the MDB5 Standard with Vue imported and it is working properly. So the question is how are you using Vue inside your project? Is it imported via CDN, installed with npm, or are you using Vue CLI / any other tooling for Vue? Would you be able to show your setup for the Vue inside your project, with all the imports and handling Vue app creation? Also, you've pasted HTML code with square brackets, are you using any kind of template engine for your HTML?

Keep coding, Marcin

parson premium commented 3 years ago

I had issues using getInstance with dynamically created alerts. I got the element by id and could then use it as expected. I don't use vue but I guess it's creating the elements after mdb would expect it to be available. e.g. const alertPopup = new mdb.Alert(document.getElementById('alert-danger'))

BigMonkey pro commented 3 years ago

There's some issue with Vanilla JS version and Vue3.

This code in my vue app didn't work either, it works if its not inside a vue app.

* HTML * [div class="alert alert-primary fade" id="examplealert" role="alert"]Example[/div] [button type="button" class="btn btn-primary" @click="testClick"]Test[/button]

* JS * methods: { testClick() { const elm = document.getElementById('examplealert'); console.log(elm); // OUTPUT: const a = new mdb.Alert(elm); console.log(a); // OUTPUT: Object { _element: div#examplealert.alert.alert-primary.fade } a.show(); // ERROR: Uncaught TypeError: a.show is not a function } }