@Hawkeye64 Changing default variables works well. But where to define .bg-my_color class to be accessible globally? If I define classes in my index.vue

<style lang="scss">
.text-brand {
  color: $brand;
}
.bg-brand {
  background: $brand;
}
</style>

it works

Hi! Can’t integrate payment widget to site. I have two parts from bank.

script

<script
  id="alfa-payment-script"
  type="text/javascript"
  src="https://testpay.alfabank.ru/assets/alfa-payment.js">
</script>

div

<div id="alfa-payment-button"
     data-token='replace_this_to_merchant_token'
     data-client-info-selector='.clientInfo'
     data-amount-selector='.amount'
     data-version='1.0'
     data-order-number-selector='.orderNumber'
     data-language='ru'
     data-stages='1'
     data-return-url='http://store.ru/success_url.html'
     data-fail-url='http://store.ru/fail_url.html'
     data-amount-format='.amountFormat'
     data-description-selector='.order' 
></div>

In pure html it gives me a payment button, but in case of vue the div is empty.

I’ve tried:

1. to place <script> directly to head section of index.template.html (in this case I have an error in my console that the div is not found. So yes, it doesn’t exists, it appears in one dialog element later. )
2. to add <script> at mounted hook

mounted () {
    this.loadAlfa()
  },
  methods: {
    loadAlfa () {
      let promise = new Promise((resolve, reject) => {
        let script = document.createElement('script')
        script.charset = 'utf-8'
        script.id = 'alfa-payment-script'
        script.src = 'https://testpay.alfabank.ru/assets/alfa-payment.js'
        script.type = 'text/javascript'
        script.async = true
        script.onload = () => {
          resolve()
        }
        script.onerror = (err) => {
          reject(err)
        }
        document.head.appendChild(script)
      })
      return promise
    }
  }

(in this case no error, but also div is empty)

Please help!

Hi! Can’t copy robots.txt on quasar build with CopyWebpackPlugin. I’ve just copy-paste from there, but there is an error:

app:webpack Extending SPA Webpack config +493ms
(node:15489) UnhandledPromiseRejectionWarning:   ValidationError: Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.
   - options[0] misses the property 'patterns'. Should be:
     [non-empty string | object { from, to?, context?, globOptions?, toType?, force?, flatten?, transform?, cacheTransform?, transformPath?, noErrorOnMissing? }, ...] (should not have fewer than 1 item)

What I’m doing wrong? Help pls!

Thanks to all! solved

@s-molinari Thanks, it works. But I have problem with reactivity, because data comes from API, so I need to add the “checked” column to rows… However, this time I did it on the server side, but it’s not right way. Can you advise me about right way to do it?

@s-molinari It’s correct. And I want to disable row checkbox by some condition

Hi! I’ve found this post, but it seems bit outdated. I can’t do it this way. I need to disable or hide “select all” checkbox, so user can select rows just one by one.

By the way, I also can’t understand how to do this with any of row? What is a body-cell-name for the selection column?
Help please!

@Mickey58 Hi! Just use style with % width

 <div class="row">

      <div class="col-md-2">
        <q-btn
          style="width: 100%;"
          label="Short label text"
        />
        <br />
        <br />
        <q-btn
          style="width: 100%;"
          label="Looooooong label text"
        />
      </div>
    </div>

But don’t forget div with row class wrapper outside. Also for mobile is better to use col-xs-12 instead col-md-2

Hi!

I’m trying to implement route guard that will store desired location for user that not yet logged in and redirect to it after login.

let storedURL = null
  router.beforeEach((to, from, next) => {
    const record = to.matched.find(record => record.meta.auth)
    if (record) {
      if (store.getters['auth/check']) {
        if (storedURL) {
          const redirectURL = storedURL
          storedURL = null
          next(redirectURL)
        } else {
          next()
        }
      } else {
        storedURL = to.path
        next('/')
      }
    } else {
      if (to.path === '/' && store.getters['auth/check']) {
        next('/dashboard')
      } else {
        next()
      }
    }
  })

It works, but on store location I have warning in my console:

Error: Script terminated by timeout at:
notify@webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:730:36
reactiveSetter@webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:1056:11
proxySetter@webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:4625:5
__onControlFocusin@webpack-internal:///./node_modules/quasar/src/components/field/QField.js:345:9
invokeWithErrorHandling@webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:1853:26
invoker@webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:2178:14
add$1/original._wrapper@webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:6907:25

And on redirect I have an error:

uncaught exception: undefined

Can’t understand what is wrong

@qyloxe Thanks for suggestion! But 5 sec for 200 rows???
For query

SELECT DISTINCT(name) FROM pg_timezone_names WHERE name NOT LIKE '%posix%';

I have 113 ms for 608 rows…
However, there are some names like “Factory”, “GMT/+8”, etc. that make things looks ugly… I’ll take a look how to avoid them.