It’s done!! I’m so excited. LOL. The little application now will take payment via PayPal AND send me an email, and the person joining an email. Since we don’t usually get more than 40 members per year, this will work great. 🙂

http://bristlenosedog.com/join/#/

Will give it a try, thx!

@dobbel
Yes i use that in one component but only when i want to over js / add props. Here i Also use template. For now i solved it as computed properties. Example:

computed: { cVal: { get() { return this.model; }, set(val) { this.$emit("modelChanged", val); }, }, },

and pass it like
v-model="cVal" to quasar component.

After in parent use like this

<inputWithButton ..... :model="form.searchText" @modelChanged="(v) => (form.searchText = v)" />

@seriusrod

You have to set the server listening IP to it’s IP address instead of 0.0.0.0:3002 . The client (Quasar that runs on someone’s browser, not server) has to connect to the nodejs server’s IP address and not localhost.

@kero

Maybe this will help to see what is going on:
https://developers.google.com/web/tools/chrome-devtools/inspect-styles/animations

Thanks for the tips, @dobbel. I also tried to do all those to no avail. What I ended up doing was pulling my last commit and replacing the files one at a time until the project crashed again. It was the strangest thing… it appears as though a newly added comment in the index.template.html file (I’ve been trying many different methods to get my font used in a html canvas to preload!) was crashing the entire app! I have no idea why commented out code would do that but nonetheless I’m back up and running!

In a project, I’m using this lib https://fengyuanchen.github.io/compressorjs/ ; it allows to resize/compress.
Used with Uploader component.

Though, to use it before it’s being uploaded and to show the final size properly, you need to create your own component based on QUploaderBase (purpose is to overwrite __add_files method, so you can call the parent method once you resize/compressed the files). I don’t think there is a better way, but it works fine for me.

What do you mean by “how to use”?

Are you looking for solutions or overall techniques?

For solutions, I know of Apex Charts.
https://apexcharts.com/vue-chart-demos/radar-charts/

One of our community members has Apex chart examples with Quasar too: https://github.com/patrickmonteiro/quasar-apexcharts

Scott

I am having a problem getting the following Google Maps overlay example to work with Quasar. The objects appear, but they are positioned in a matrix with top-left object at the window center; if the map is panned, the objects move back to the window center. I think the problem has to do with the use of the “this” variable, as the projection appears to be to the parent window, not the Google Maps div. Solving this problem is critical to my project, so a $ 30 donation to Quasar if someone can find hopefully an easy solution. How can one ascertain to what “this” refers, and substitute that variable with the appropriate object? Thanks! (submitted 2:15 pm US Eastern)
https://developers.google.com/maps/documentation/javascript/customoverlays

@daep93 I have never used Quasar with vue-cli, but maybe the animations option array doesn’t work in Vue.use ? You could try to just copy / paste the css from here into your own css file:
https://github.com/quasarframework/quasar/blob/dev/extras/animate/fadeIn.css

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { animation-name: fadeIn; } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .fadeOut { animation-name: fadeOut; }

@npi2loup Since you’re just using a standard form action instead of ajax, it can be simplified a bit: https://codepen.io/pianopronto/pen/ExgzWYp?editors=1111

I removed the @submit action, and the hidden button. Also put in multiple formactions.

I don’t see a way around the one reference. I’m not sure what the reasoning against using a ref is, I use them quite a bit in my codebases.

As side-note, you can also do it without CSS – that’s something you could achieve with slots: https://quasar.dev/vue-components/uploader#Slots by customizing the header.
More verbose though, but I guess cleaner in a way.

field-name=“profile_pic” <- worked.
thank you very much

@cynderkromi Dobbel pointed you in the right direction here. You’ll need to first perform the payment in the browser via paypal. Once paypal responds that it accepted a payment, it will return a payment / transaction id, which you then submit to your own server that in turn sends you an email. I assume you will manually check that you indeed have a payment in paypal at this point before issuing membership, else you’d have to also verify the payment on your server. Just keep in mind if you don’t verify, some script kiddie could submit membership applications without paying, but I wouldn’t worry about that unless you have the dev resources to do server side checking, because it’s probably not a problem unless you’re a high target.

@rhscjohn I had this in my inital router page code (“src/pages/Index.vue”), as this is the only page in the app and contains all of the code and data needed - instead of separating the app screens into multiple pages I used tab panels. I know this might not be good coding style, but with just 900 lines of not condensed code I think it’s reasonably manageable up till now.

I helped myself by removing the lifecycle approach and added a conditional “continue”-button to the start screen, which is checking for a flag variable in LocalStorage instead of jumping to the point where the user left the app automatically.

Thank you for pointing this out. Since no solution exist yet, I’ll open a github issue about this. Thank you for your input.