No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. reath
    R
    • Profile
    • Following 0
    • Followers 0
    • Topics 14
    • Posts 26
    • Best 2
    • Groups 0

    reath

    @reath

    2
    Reputation
    334
    Profile views
    26
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    reath Follow

    Best posts made by reath

    • RE: vuelidate multiple error-labels

      @metalsadman I tried to implement the Vuelidate-error-extractor, but with no luck. Here are the steps I made

      1. npm install vuelidate-error-extractor
      2. added plugin ‘vuelidate-error-extractor’ using quasar CLI and added it to the “plugins” section in quasar.conf after Vuelidate:
       plugins: [
            'i18n',
            'axios',
            'vuelidate',
            'vuelidate-error-extractor'
          ]
      

      Here is the content of vuelidate-error-extractor.js:

      import VuelidateErrorExtractor, {templates} from 'vuelidate-error-extractor'
      import FormGroup from '../components/FormGroup.vue'
      import FormSummary from '../components/FormSummary.vue'
      
      const messages = {
        required: 'Field {attribute} is required',
        email: 'Field {attribute} is not a proper email address',
        maxLength: 'Field {attribute} exceeds maximum length.',
        minLength: 'Field {attribute} requires minimum length.'
      }
      
      export default ({app, router, Vue}) => {
        Vue.use(VuelidateErrorExtractor, {
          messages,
          attributes: {
            name: 'Name',
            email: 'Email',
            text: 'Text',
            username: 'Username',
            password: 'Password',
            firstName: 'First Name'
          }
        })
      
        Vue.component('FormGroup', FormGroup)
        Vue.component('FormSummary', FormSummary)
        Vue.component('formWrapper', templates.FormWrapper)
      }
      

      FormGroup and FormSummary are the same (copy-paste) as the ones provided in https://codesandbox.io/s/q8pzo4q6kq . I don’t even use FormSummary for now

      And here is my super simple RegisterForm

      <template>
          <form-wrapper :validator="$v.user">
              <form-group label="Email"
                          name="email">
                  <q-input type="text"
                           v-model="user.email"
                           @blur="$v.user.email.$touch"/>
              </form-group>
          </form-wrapper>
      </template>
      <script>
      import { required, minLength, maxLength } from 'vuelidate/lib/validators'
      
      export default {
        data () {
          return {
            user: {
              email: ''
            }
          }
        },
        validations: {
          user: {
            email: { required, minLength: minLength(4), maxLength: maxLength(20) }
          }
        }
      }
      </script>
      

      But after I enter the page I don’t get the input displayed and I see these errors in the browser:

      [Vue warn]: Error in render: "TypeError: undefined is not an object (evaluating 'this.preferredValidator.$error')"
      
      found in
      
      ---> <FormGroup> at src/components/FormGroup.vue
             <FormWrapper>
               <Register> at src/pages/Register.vue
                 <QPageContainer>
                   <QLayout>
                     <MyLayout> at src/layouts/MyLayout.vue
                       <App> at src/App.vue
                         <Root>
      TypeError: undefined is not an object (evaluating 'this.preferredValidator.$error')
      

      If I remove the form-wrapper like this the errors disappear.

      <template>
              <form-group :validator="$v.user.email" label="Email"
                          name="email">
                  <q-input type="text"
                           v-model="user.email"
                           @blur="$v.user.email.$touch"/>
              </form-group>
      </template>
      

      but instead of the error message, below the input only ‘required’ or ‘minLength’ or ‘maxLength’ are displayed. In other words said, the keys are displayed, not the values (required: "Field {attribute} is required")

      P.S. In the first example with form-wrapper I found out that if I remove the name attribute from form-group the error dissapears, but things don’t work as expected.

      posted in Framework
      R
      reath

    Latest posts made by reath

    • RE: Access $router outside vue

      Thank you @rstoenescu for the guidelines. I’m trying to use the router in a vuex action inside of a module. How would I transfer that part of the redirect logic in a boot file?

      posted in Framework
      R
      reath
    • RE: Access $router outside vue

      Both router().replace({name: 'logout'}) and router().replace({name: 'logout'}) only change the URL, but nothing more happens. The page isn’t changed, no errors are shown in the console. I have to click F5 and then things work (because the URL is changed to the right one)

      posted in Framework
      R
      reath
    • QSelect showing option value instead of label

      With this code

        <q-select v-model="bot.exchangeApi"
                        @blur="$v.bot.exchangeApi.$touch"
                        :options="exchangeApis"
                        label="Exchange API"
                        emit-value
                        stack-label/>
      
          this.exchangeApis = [{
                label: 'first',
                value: 'firstVALUE'
              }]
      

      This is OK (first is shown)
      778ec0c4-2e92-4de3-bca8-8401b2693356-image.png

      But after I select first the input is populated with firstValue
      da86a1e3-41b4-4142-aab8-6226fd2b29e3-image.png

      How can I make it to show first in the input, I want firstValue only in the v-model (which is so).

      posted in Framework
      R
      reath
    • RE: Access $router outside vue

      Tried that, but the line
      router().replace({name: 'logout'}) only changes the url, without anything happening on the UI. Things work after I click F5

      posted in Framework
      R
      reath
    • Access $router outside vue

      How can I access $router in a .js file?

      posted in Framework
      R
      reath
    • Responsive flex order

      Is there a build-in way to solve this problem described here (SO)?
      Tl;dr: If I have

      <div class="row">
      <div class="col-xs-12 col-sm-3">1</div>
      <div class="col-xs-12 col-sm-9">2</div>
      </div>
      

      Which on desktop I’d like to be displayed in the order
      1 2

      How can I make them display like this on mobile

      2
      1

      posted in Framework
      R
      reath
    • QTable grid undefined

      I have this <q-table>
      545e861d-2912-436d-9432-449075a34ab6-image.png

       <q-table
            :grid="$q.screen.xs"
            :title="showTitle ? 'Payables' : ''"
            :data="payables"
            :columns="columns"
            :visible-columns="visibleColumns"
            :rows-per-page-options="[5,10,15]"
            row-key="id"
            :pagination.sync="pagination"
            :loading="loading"
            @request="request"
          >
            <template v-slot:body-cell-from="props">
              <q-td :props="props">
                <template v-if="props.row.fromAccount">
                  <router-link :to="{name:'account', params: {accountId: props.row.fromAccount.id}}">
                    {{ props.row.fromAccount.name }}
                  </router-link>
                </template>
                <template v-if="props.row.fromPartner">
                  <router-link :to="{name: 'partner', params: {partnerId: props.row.fromPartner.id}}">
                    {{ props.row.fromPartner.name}}
                  </router-link>
                </template>
              </q-td>
            </template>
      
            <template v-slot:body-cell-to="props">
              <q-td :props="props">
                <template v-if="props.row.toAccount">
                  <router-link :to="{name:'account', params: {accountId: props.row.toAccount.id}}">
                    {{ props.row.toAccount.name }}
                  </router-link>
                </template>
                <template v-if="props.row.toPartner">
                  <router-link :to="{name: 'partner', params: {partnerId: props.row.toPartner.id}}">
                    {{ props.row.toPartner.name}}
                  </router-link>
                </template>
              </q-td>
            </template>
          </q-table>
      
      columns: [
                {
                  name: 'id',
                  field: 'id',
                  label: 'Id',
                  sortable: false,
                  align: 'left'
                },
                {
                  name: 'orderId',
                  field: 'orderId',
                  label: 'Order ID',
                  sortable: false,
                  align: 'left',
                  format: (val) => `${val.substr(0, 8)}...`
                },
                {
                  name: 'from',
                  field: obj => obj,
                  label: 'From',
                  sortable: false,
                  align: 'left',
                },
                {
                  name: 'to',
                  field: obj => obj,
                  label: 'To',
                  sortable: false,
                  align: 'left',
                },
                {
                  name: 'fromAmount',
                  field: obj => obj,
                  label: 'From Amount',
                  sortable: true,
                  align: 'left',
                  format: (val, row) => `${row.fromAmount} ${row.fromCurrency}`
                },
                {
                  name: 'toAmount',
                  field: obj => obj,
                  label: 'To Amount',
                  sortable: true,
                  align: 'left',
                  format: (val, row) => `${row.toAmount} ${row.toCurrency}`
                },
                {
                  name: 'type',
                  field: 'type',
                  label: 'Type',
                  align: 'left',
                },
                {
                  name: 'createdAt',
                  field: 'createdAt',
                  label: 'Created',
                  sortable: true,
                  align: 'left',
                  format: (val) => new Date(val).toLocaleString()
                }
              ],
              visibleColumns: ['orderId', 'from', 'to', 'fromAmount', 'toAmount', 'type', 'createdAt']
      

      As you can see, I alter some of the columns by the format property, but for from and to I use the v-slot:body-cell-[name] slot for customization. The problem is when I activate grid, the columns which are customized using v-slot:body-cell-[name] show as undefined:
      e4ccf09c-4148-466e-91cd-7f2c187538f1-image.png

      Is there a way to use the same slot for both table and grid mode? I know I can customize the whole item slot which is used for grid, but I was wondering if there’s an easier way.

      posted in Framework
      R
      reath
    • QTable hide pagination controls

      I know of the hide-bottom property for <q-table>, but when I hide the pagination this way, I loose the "Data not available" which is a functionality I want. How can I hide only the pagination?
      5cdd0000-9786-4c71-b295-3c38d0991bc1-image.png

      posted in Framework
      R
      reath
    • QTable select row when clicking row

      Currently in order to select a row I must click on the tick box to the left. Is there an easy way to make so that it doesn’t matter where I click in order to select a row?

      posted in Framework
      R
      reath
    • How to change these colors?

      Does somebody know how can I change the following DEFAULT colors:
      a3979da4-4ca1-4938-9b25-f3d5f0ee4456-image.png

      -Clients placeholder on <q-select>
      -Clients helper on <q-field>
      -the down arrow in the upper-right <q-select>
      -The underline on the <q-select>
      -The label attribute on <q-field>

      posted in Framework
      R
      reath