Thank you so much @patryckx, It works like a charm.

I hope it is useful for other Quasar Developers.

@Stanley Its a good idea. I’ll try to modify my process. Thank you for the suggestion.

@Stanley Thank you for the answer.
I use Golang for the back-end server and I only have to check the item code by making a call (with axios) to the back-end server; all other checks are carried out in Quasar.

Hi all,
I have a simple form with some qinput fields that I want to validate before post the data to the backend server when the user click a button.

My code is this

<template>
...
<q-btn dense class="q-mt-sm q-ma-xs" color="green" icon="check_circle_outline"  @click="UpdateRow"/>
...
</template>
...
<script>
....
methods: {

      async UpdateRow () {
                
            this.descrerror = []
            if (this.orderrow.item.length === 0) {
               this.descrerror.push('Item code is wrong')
            } else {
               await RestfulServices.getitemdesc(this.orderrow.item).then(response => {
                  if (response.statusText !== 'OK' || response.data.length === 0) {
                     this.descrerror.push('Item does not exists.')
                }
              })
            }

          if (this.descrerror.length > 0) {
              this.validateerror = true
             return
           }
}
...
</script>

To get the item description from the backend server I use Axios and I had to use async and await istructions to prevent that the instructions following the request to the server from being executed before the server replied.

I thought about not using Vuelidate because several controls require access to the back-end server, but maybe it’s not a bad idea.

Do you have any advice to improve this code ?

Thank you

I am a newbi of this beautiful framework and my first test app concerns a classic order entry system for the sales force.

Do you know where you can find some examples with order entry forms (master / detail) with different input fields (for example <q-input v-model = “search”> for articles, etc.)?

Thank you very much.

Thank you so much @patryckx, It works like a charm.

I hope it is useful for other Quasar Developers.

This is may InitPage.vue

<template>
  <q-page class="flex flex-center">
    <h5>Welcome {{ this.getUserName }} </h5>
   </q-page>
</template>

<script>

export default {
 data () {
    return {
      username: ''
      }
 },

 computed: {

  getUserName () {
       return this.$store.getters['user/GetUserName']
    }

 },

 methods: {


    }

}
</script>

@patryckx This is my route file

const routes = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      {
        path: '',
        component: () => import('pages/login.vue'),
        meta: { requiresAuth: false }
      },
      {
        path: '/login',
        component: () => import('pages/login.vue'),
        meta: { requiresAuth: false }
      },
      {
        path: '/index',
        component: () => import('pages/InitPage.vue'),
        meta: { requiresAuth: true }
      }
   ]
  }
]

// Always leave this as last one
if (process.env.MODE !== 'ssr') {
  routes.push({
    path: '*',
    component: () => import('pages/Error404.vue')
  })
}

export default routes

and the EssentialLink.vue file

<template>
  <q-item
    clickable
    tag="a"
    target="_blank"
    :href="link"
  >
    <q-item-section
      v-if="icon"
      avatar
    >
      <q-icon :name="icon" />
    </q-item-section>

    <q-item-section>
      <q-item-label>{{ title }}</q-item-label>
      <q-item-label caption>
        {{ caption }}
      </q-item-label>
    </q-item-section>
  </q-item>
</template>

<script>
export default {
  name: 'EssentialLink',
  props: {
    title: {
      type: String,
      required: true
    },

    caption: {
      type: String,
      default: ''
    },

    link: {
      type: String,
      default: '#'
    },

    icon: {
      type: String,
      default: ''
    }
  }
}
</script>

Thank you

@patryckx Excuse me, yes is tiny in the code

        <EssentialLink
          v-for="link in essentialLinks"
          :key="link.title"
          v-bind="link"
        />

Thank you @patryckx - The blank char before Key is an error of my msg and is not in the code.

I have done this but the problem persists

data () {
   return {
     leftDrawerOpen: false,
     essentialLinks: [
       {
         title: 'Home',
         caption: 'Go to the home page',
         icon: 'home',
         to: '/index'
       },
  ....

Hi all,
I’m new to this fantastic framework so sorry for my stupid question but I am unable to solve this simple problem.

If I link a new page of my first application to the standard menu in MyLayuot.vue, a new tab is always opened where the page is displayed.

How can I view the page inside the tab where the application is active by keeping the menu on the left?

The code is this

      <Q-item-label
        header
        class = "text-gray-8"
      >
        Menu
      </ Q-item-label>
      <EssentialLink
        v-for = "link in essentialLinks"
        : Key = "link.title"
        v-bind = "link"
      />

Thank you so much