Quasar Framework

digiproduct

As I’ve been learning Quasar, I’ve been watching Danny Connell’s excellent free video training on YouTube.

He’s got a real great teaching style that makes it easy to learn … and he covers things in such detail that it’s easy to get going using his course.

You can watch his full FREE YouTube training course at …

https://www.youtube.com/playlist?list=PLAiDzIdBfy8iu_MZrq3IPuSFcRgCQ0iL0

If you want something more advanced, he’s just released a more detailed course on Udemy, and it’s currently at a special linka for Quasar users at Udemy …

Use this link and 50% of the revenue will go to the Quasar Team: https://dannys.link/quasarf

There’s almost 15 hours of training videos in the course … it’s massive … but, obviously, you can watch them at whatever pace you wish.

digiproduct

How do you get QSelect to display the label instead of the value?

Often you might wish to display the label value of your options in the QSelect rather than the actual value.

For example, if you have a QSelect for salesRegionId but wish to show the descriptive label of that region. eg.
Label: North East
Value: 3

To get this to work in that way, you need to add two settings to your QSelect

emit-value
map-options

Here’s the example code quickly …

        <q-select
          filled
          v-model="salesRegionID"
          :options="options"
          label="Standard"
          emit-value
          map-options
        ></q-select>

and here’s the sample data

      salesRegionID: null,
      options: [
        {
          label: 'North West',
          value: '1'
        },
        {
          label: 'North Central',
          value: '2'
        },
        {
          label: 'North East',
          value: '3'
        },
        {
          label: 'South West',
          value: '4'
        },
        {
          label: 'South Central',
          value: '5',
        },
        {
          label: 'South East',
          value: '6',
        },
      ]

You can find a reference to this in the docs at
https://quasar.dev/vue-components/select#Example--Map-options

And here’s a codepen, showing the above example if you want to try it out
https://codepen.io/david-watson-the-encoder/pen/eqNrZz

digiproduct

@wcomnisky That will be perfect for an upcoming project I have planned … thanks for doing that … and also thanks to @patryckx for creating the original work that allowed you to do this translation.

digiproduct

I knew I needed to learn some new front-end package system and saw mention of some comparison between Angular and React (one backed by Google and one by Facebook) and thought I’d probably need to learn on of those. Bought a Udemy course for each to start learning them, but quickly got discouraged …

I was also learning Laravel at that time, and came across Vue via Laravel … and was instantly attracted to it. It just seemed so much more simple and elegant compared to the other two. A template section, a style section, and a script section … just seemed so logical … my brain could easily understand that!

After I’d learned a bit more about Vue and became comfortable creating my own components … I decided that I needed a comprehensive library of components from a single vendor, so that I had consistency among the components. Looked at several frameworks, and had decided to go for Vuetify.

Had pretty much committed myself to that decision, about a month or so ago, when I accidentally learned of Quasar from a chance comment over on Laracasts.

I had a few minutes to spare at the time, and on a whim decided to look and see what it was as I had never previously heard about it … found the massive list of Quasar components … and fell in love!

digiproduct

@s-molinari said in Adding and accessing new pages:

Also, if you are just beginning with Vue, I’d suggest you take this course.

https://www.udemy.com/vuejs-2-the-complete-guide

It will save you and us a lot of unnecessary questions and answers.

Scott

This course is currently available on Udemy at the knockdown price of just 11.99 … for the next 5 days only.

Just grabbed my copy … it’s a steal.

I already have some experience of Vue … but this will still be a great reference resource for such a steal of a price.

digiproduct

@s-molinari I will probably do so as I develop my usage.

digiproduct

@patryckx Many thanks for that … I don’t speak any Portugese, but I could figure out most of what you’re doing and Google Translate will help me when I get around to actually implmenting this for myself.

Again … many thanks.

digiproduct

@Allan-EN-GB I was going to contact you on it … but it can wait … it’s not urgent

digiproduct

update on this …

at the suggestion of @metalsadman I installed Vue.js Extension Pack by Hari Shekhar …

I feel like I’ve died and gone to heaven …

I LOVE the little line that links the curly brackets at the start and end of the function

The colours work perfectly for me … and I’m colour-blind in the red/green sector … but the default colours from this package work perfectly for me …

Thanks, @metalsadman … great suggestion

digiproduct

@ and I intend it shout about it “from the rooftops” everywhere I go … I’ve already recommended a developer friend to investigate it.

digiproduct

@kosirm that RFS package looks very interesting

digiproduct

@kosirm That https://type-scale.com/ looks very interesting … thanks for posting that link.

digiproduct

@PeterQF There is a Swedish Channel on the Quasar Discord Chat group.

https://chat.quasar.dev/

digiproduct

@Hawkeye64 you beat me to it by seconds

digiproduct

@pavarine I think @Hawkeye64 is probably the best person to advise you on this

digiproduct

I ran into a similar issue (not using refs though) … because I expected to see my components on my QDiloag in Chrome Dev Tools and couldn’t understand why they did not show.

By using console.log in mounted of the QDialog, I determined that the components on the QDialog are recreated each time the QDialog is opened … I am opening, closing, and re-opening the QDialog several times hence how I first noticed this.

I ended up making use of Vuex because of this.

digiproduct

@mrcalvo If you look at the end of the first paragraph on the Docs page for QEditor, there are links for the MDN docs of the underlying components of the QEditor.

If you go to those docs, you might find some hints about how you could detect this.

digiproduct