Currently, I am utilizing Vue.js and Quasar, along with a Vuex store. Although the properties that were initially present during the initialization of the store are reactive, none of the newly created properties on an object of the store seem to be reacti ...
Could someone provide some guidance on how to create a table with nested elements like the one shown in the screenshot? View table image here I am facing an issue connecting additional drop-down lines within the table. Is there functionality available fo ...
Can the q-tooltip text be loaded dynamically? Which property should be used for this purpose? In my scenario, which property should replace :value (please note that this is just a demonstration and not an actual property of q-tooltip)? <q-item-sectio ...
I've been working on my project using Q-Tab, and I've been trying to adjust the font size and weight of the tab labels without success. I've experimented with the typography options in Quasar, but nothing seems to work. <q-tabs v-model="tab" ...
Currently, I am fetching data from a .json file and utilizing a v-for to loop through each object and generate a card for them individually. A strange issue has arisen that is leaving me puzzled: Upon refreshing the page, the background-size COVER no l ...
I am facing an issue while designing a screen to submit a form in modal using vue3 and quasar. I have organized the form components by tabulating them, but when I switch tabs, the current selection disappears, showing the old value when I return. However, ...
In my current project, a quasar (vuejs) app, I am faced with an issue related to an update form functionality. The challenge I am encountering is that when I submit the form without making any changes to the select box, it submits the label as a string ins ...
Currently, I am in the process of developing an application using Quasa V2 framework, vue, vite, pinia, and format. One of the components in my app is basicList.vue, which retrieves its control attributes and properties from a pinia store named oTable. By ...
Below is the data object: registration: { step1: { project: '', }, step2: { adres: '', facade: '', floor: '', }, }, An attempt is being made to validate user inputs with a sing ...
I am currently working on a Vue JS project and I am looking to incorporate some components, such as range sliders. However, I am struggling to understand how to integrate these components into my existing project. I have tried following tutorials for insta ...
Here's the code snippet I used for the q-select element: <q-select square outlined fill-input standout="bg-grey-3 text-white" v-model="unit_selection" :options="units&qu ...
Looking to set an asterisk (*) next to the Select component in Quasar when it is marked as "required". While I can achieve this with the input component, replicating the same behavior for dropdowns has proved challenging. I attempted using the :deep selec ...
Currently, I am working with a computed property that represents an object of a specific type defined within my Vuex Store. The goal is to utilize this property in my component using v-model. I have thoroughly set up getters and setters for this property a ...
I seem to be having an issue with my code where no matter what route I give, it only takes me to the home page. Specifically, when I give the path "auth", it still redirects me to the home page. Can someone please help me understand why this is happening a ...
THE ISSUE AT HAND I have a Quasar CLI (Webpack) setup for my app, and everything runs smoothly in SPA mode. However, when I switch to SSR, an unexpected issue arises. The Vue Router redirect from path "/"" to "/index" does not function as expected. Instea ...
DISCLAIMER: Please refer to the answers for the correct solution based on my code. ISSUE IDENTIFIED: The latest version of Quasar (1.2.4) is causing a bug where q-btn components within the v-slot:after slot of a q-input component fail to submit the q-form ...
Inside the q-btn, there is a q-checkbox. Additionally, I included a div to style the text. <q-btn flat color="blue" class="full-width no-padding" @click="tog(item)" > <q-checkbox ...
To integrate the following code into a Quasar 2.6.0 application, I am encountering an issue that needs attention. async fetchAbstracts() { try { const url = 'https://eutils.ncbi.nlm.nih.gov/entrez/eutils/efetch.fcgi?db=pubmed&id=33888705,183 ...
Currently, I'm in the process of setting up error reporting for my Vue.js SPA application following Sentry's documentation. To enable Sentry to capture errors, a sourcemap is required due to minification during the build process, which Vite generates. The ...
I am encountering an issue while attempting to create a custom child component with props as row data. The error message "rows.slice is not a function" keeps appearing, and upon inspecting the parent data, I found that it is an Object. However, the props r ...
While running $ quasar dev on my Vue project, I encountered the following error: ~/project/node_modules/webpack-merge/dist/index.js:63 throw new TypeError("Merging undefined is not supported"); ^ [ TypeError: Mer ...
I'm currently utilizing QUASAR and encountering an issue where I am unable to retrieve the state of my q-checkbox to determine whether it is checked or not. Despite using event.target.checked and event.target.value, both return as undefined. Below is ...
I encountered an issue while unit testing a getter function. The error message Expected 4 arguments, but got 1. appeared when I attempted to use the getter. My application was built using Quasar and utilizes TypeScript. The value of HttpMocks.mockToken is ...
Looking for solutions to speed up the loading of a list containing pre-signed image urls. Is there a method to reduce the size of the images or accelerate their loading time? Experimented with converting images to canvases in an attempt to decrease file s ...
I am currently working on a q-markup-table code to display products based on a search query. I have successfully implemented a button that allows the user to select a row from the table, and once selected, the row data is sent to an array named "selected ...
I am currently working on a WebRTC application using Quasar, typescript and Vue. In my code snippet below, I am encountering an issue where I don't get any errors in WebStorm (as it uses the project's eslint config), and I can navigate to the definition of ...
Currently working on a project using Vue.js, Quasar, and TypeScript. However, encountering errors that state the following: Property 'y' does not exist on type 'number | { x: number[]; y: number[]; }'. Property 'y' does not ...
Can the selected item of an Expansion Item have a highlighted color? <q-expansion-item expand-separator v-for="(menu, index) in menus" :style="index === 0 && 'margin-top: 20px&apo ...
I've encountered a strange issue while trying to conduct unit tests on my Quasar application. The problem seems to be that the test is unable to locate elements with the name tag, except for the q-route-tab components. I've experimented with different comp ...
I'm experiencing difficulties accessing Quasar's this.$q within a node module and using it as a boot plugin in the Quasar CLI. In a component where I initialize my QLayout and can successfully access this.$q, I encounter errors when attempting to access t ...
Currently, I am utilizing quasar in one of my projects. The dialog component I am using is becoming redundant in multiple instances, so I am planning to create a dialog wrapper component named my-dialog. my-dialog.vue <template> <q-dialog v-bin ...
I find myself struggling with the arrangement of Quasar and it's not quite clicking for me, even after going through the documentation. The scaffolder presented me with this code snippet. However, it positions the Drawer on the left side. Is there a ...
After following a tutorial, I have the code snippet below that I would like to enhance: <div style="margin-top: 10px;"> v-for="task in taskItems" :key="task.id" <q-icon :name="task.icon"/> <div ...
Hello there! I am currently working on implementing Firebase for the first time in my Quasar App (powered by Vue 3). I have set up the firebase.js boot file with the following content: import { boot } from 'quasar/wrappers' import { initializeApp } from 'f ...
Here is my axios configuration I am able to receive the cookie successfully using Postman, so it seems to be an issue with axios. const api = axios.create({ baseURL: 'http://localhost:8000/', withCredentials: true, headers: { crossDomain: true, 'Con ...
Can someone assist me with finding a solution to display the tooltip element only when the span element is truncated? <q-td v-for="(col,index) in props.cols" :key="col.name" :props="props"> <span class="t ...