@hawkeye64 Placed a breakpoint on the red line. On reload the breakpoint is hit 3 times. The first 2 times its ok, on the third time the style
property of n
is undefined. (So n
is ok, n.style
- undefined
reath
@reath
Posts made by reath
-
RE: [Error] kwift.js "undefined is not an object (evaluating 'n.style.display="none"')"
-
Add .css file from node_modules folder
I want to embed this component in my quasar project: https://github.com/gruhn/vue-qrcode-reader
I installed it via yarn and while reading the docs I came accross this warning:
⚠️ A css file is included when importing the package. You may have to setup your bundler to embed the css in your page.
The CSS file is in node_modules/vue-qrcode-reader/dist. Since I’m not familiar with WebPack I was wondering how is the RIGHT way to import this css? Should I copy it to my css folder and include it in the
quasar.conf
->css
array, or there is a better way? -
RE: vuelidate multiple error-labels
@dobromir Another clue: yarn gives me this warning:
vuelidate-error-extractor@2.2.2" has unmet peer dependency "vue@^2.5.16".
-
[Error] kwift.js "undefined is not an object (evaluating 'n.style.display="none"')"
Does somebody know why I’m receiving this error:
SAFARI
CHROME
In Firefox it does not show.
Everything works as expected, but I was wondering what is causing it
-
RE: Q-Select can't change text color
@s-molinari Yes Scott, you’re right that the select is in the toolbar. This is what happens with the dark prop
Almost, but I don’t like the darkened background when selecting an option. If there’s no other option I guess I’ll hide the prefix and leave it like this
The grey down arrow still bugs me though -
Q-Select can't change text color
Given this q-select:
<q-select :options="languages" v-model="lang" prefix="Language: " color="white" />
I get this:
But using
color="white"
I thought I would get something like this:How can I color the pointed elements white? The prefix, the option text, the pointed down arrow, and the underline?
-
RE: vuelidate multiple error-labels
@dobromir Try to reinstall Quasar-CLI. Then do a
$ quasar init <folder-name> $ cd <folder-name> $ quasar dev
I suggest enabling vuei18n in the init of the project because this way you’ll have a setup identical to mine.
With this and the code I posted in https://forum.quasar-framework.org/post/10043 you’ll have a setup identical to mine
-
RE: vuelidate multiple error-labels
@dobromir Yes. The codesandbox link was provided by @metalsadman in order to guide me on how to use your extension. I’m using Quasar CLI and in the 1st topic I have posted the related code. Can you run the extension by plugging it in the Quasar CLI created project with i18n? Because I and @metalsadman can’t get it to work. Do you need more code?
-
RE: Access $i18n in vuex action
https://quasar-framework.org/components/internationalization.html#Dynamically-Changing-Language this described method to dynamically change the language. As you can see from my
setLanguage
function inmutations.js
it’s the same thing as in the link, but it doesn’t work. UsingQuasar.i18n.set(lang.default)
to set the new language, the UI does not update and when I callQuasar.i18n.getLocale()
afterwards I get us-gb, which is not the language that I’ve set.Sorry for my bad English, if you cannot understand I’ll try to understand it better. See the code examples
-
Access $i18n in vuex action
I want to access the $i18n object in a vuex action in order to reactively change the language. Reading the documentation I came across https://quasar-framework.org/components/internationalization.html#Dynamically-Changing-Language but this doesn’t work for me.
Here’s what I’ve got.
mutations.js
export function setLanguage (state, language) { state.currentLanguage = language LocalStorage.set(LANGUAGE, language) import(`src/i18n/${language}`).then(lang => { Quasar.i18n.set(lang.default) Quasar.i18n.locale = language console.log(Quasar.i18n.getLocale()) }) }
lang
is successfully populated with the corresponding language set.- I know this line
Quasar.i18n.locale = language
isn’t in the tutorial, but I tried with it. - The
console.log
below outputs the old language and in the UI nothing changes.
I successfully made a component that changes the language, which works reactively on the UI (everything is refreshed with the new language) using the $i18n injected property, but I don’t know how to access it outside of a Vue component
SelectLanguage.vue
<template> <q-select :options="[ { label: 'English (US)', value: 'en-us' }, { label: 'Bulgarian (BG)', value: 'bg-bg' }, ]" v-model="lang"/> </template> <script> export default { data () { return { lang: this.$q.i18n.lang } }, watch: { lang (lang) { this.$i18n.locale = lang } } } </script>
Using the line
this.$i18n.locale = lang
everything just works.Another question I have, which I’ll maybe answer myself if someone helps me with this problem, is how to access the
fallbackLocale
outside of a Vue component