Help

• G

  Is ther any way to change the hight of q-input?
  • gigdleo  

  1
  0
  Votes
  1
  Posts
  8
  Views

  No one has replied

• M

  How to use vue-auth on Quasar
  • manelclos  

  5
  1
  Votes
  5
  Posts
  1587
  Views

  O

  @manelclos said in How to use vue-auth on Quasar: Like Quasar has the router.js file and vue-auth needs the router to be already present, and probably I didn’t solve that in the right way vue-auth doesn’t have the router file, it has the driver for the vue-router. You need that to check and authorize routes.
• D

  Custum Style Quasar Input
  • DreaMy  

  2
  0
  Votes
  2
  Posts
  13
  Views

  O

  Add a class name to that input and owerride the original q-input class rules with your style.
• D

  Make copy of Object for undo function
  • dirkhd  

  5
  0
  Votes
  5
  Posts
  13
  Views

  

  @dirkhd said in Make copy of Object for undo function: I really do not understand why after all my approaches Please do not stop digging, searching, testing, learning until you WILL understand this “why” completely. The “why” is the most important. Everywhere. You have an excellent opportunity to take your undestanding of Vue, reactivity and programming to the next level.
• F

  Quasar media player extension missing in ssr build?
  • FrankM  

  1
  0
  Votes
  1
  Posts
  7
  Views

  No one has replied

• J

  How to set fixed column widths in Q-Table
  • jrhopkins83  

  5
  0
  Votes
  5
  Posts
  32
  Views

  Q

  @metalsadman Thanks! Once again, careful reading of the docs can save a lot of time.
• P

  How to update progress in QUploader
  • proequilibrium  

  1
  0
  Votes
  1
  Posts
  9
  Views

  No one has replied

• D

  How to call "mounted" in ssr
  • dzzq  

  1
  0
  Votes
  1
  Posts
  13
  Views

  No one has replied

• K

  How to set column widths in a Q-Table?
  • kerbo  

  4
  0
  Votes
  4
  Posts
  628
  Views

  T

  Hi @jairomonassa , could you share sample implementation for this problem? thanks
• C

  q-table fixed column width
  • charlesvinoth  

  3
  0
  Votes
  3
  Posts
  572
  Views

  T

  Hi @pavarine , could you please show sample implementation in setting style and in the q-td tag body and header, thanks
• 

  Having a q-item-label expand to available width
  • mboeni  

  3
  0
  Votes
  3
  Posts
  22
  Views

  J

  You may give a try to .col-auto css class. https://quasar.dev/layout/grid/introduction-to-flexbox#Managing-Children
• N

  Q-dialog, access to data in list/loop
  • namtn-dev  

  3
  0
  Votes
  3
  Posts
  20
  Views

  T

  @namtn-dev You need to keep track of the item what was clicked. So instead of @click="dialog = true" you should do @click="opendialog(ral)" and then in your methods opendialog(listItem){ this. dialog = true; console.log(listItem) }
• D

  This topic is deleted!
  • dzzq  

  1
  0
  Votes
  1
  Posts
  6
  Views

  No one has replied

• B

  Can't load responsive images in q-img
  • bmw20075112  

  1
  0
  Votes
  1
  Posts
  7
  Views

  No one has replied

• W

  How to build rows within a column?
  • wpq  

  6
  0
  Votes
  6
  Posts
  17
  Views

  W

  @s-molinari my page is a set of rows, and each row has a variable number of “blocks” (such as the date and time in the example). The general idea is: <q-page> <div class="row"> <div class="col-auto"> <currentTime></currentTime> <currentDate></currentDate> <q-btn @click="$q.dark.toggle()"></q-btn> </div> <!-- another div in that row--> <!-- and another one--> </div> <!-- another div div with row (and subsequent structure)--> <!-- and another one--> </q-page> Ultimately I want to replace with quasar my home dashboard which is a bit old now (you can see the different “layers” of information):
• I

  How to access Vuex from Axios boot files
  • ioncoder  

  7
  0
  Votes
  7
  Posts
  27
  Views

  I

  @s-molinari @metalsadman Thank you, Yep, That solved it. I was coding from 7am till 1am yesterday so I will give myself a break (this time), still feel like a bit of an idiot though. Thanks for your help. Simon
• U

  How can I achieve a text Input with dropdown options
  • uselinux  

  3
  0
  Votes
  3
  Posts
  10
  Views

  U

  @Allan-EN-GB I’ve gotten this far today. Clicked right after posting. Of course. I was under the impression it was not working as I saw no formData from both the input and the dropdown. On the form page: “If you are using the native action and method attributes on a QForm, please remember to use the name prop on each Quasar form component, so that the sent formData to actually contain what the user has filled in.” Although I’m not using native that was the case to see data. Either way I can proceed onSubmit (evt) { const formData = new FormData(evt.target) for (const value of formData.values()) { console.log(value) } },
• 

  Can't ad meta title dynamically following docs
  • PeterQF  

  9
  0
  Votes
  9
  Posts
  96
  Views

  C

  I did not find a better integrated solution after considerable research and experimentation. However, I did take a different approach. Vue-Meta, prerendering (using history mode), and sitemap generation really did everything I needed for Google searches. Google renders the pages and could easily find the meta tags. This is great, for people using Google and Ask for searches. However, for the other search engines and the test tool that you noted, the meta data is not found because these engines do not crawl through the javascript. After a lot of reading, I noticed a dismissive attitude on the part of some for this meta tag rendering problem, because Google accounts for the overhelmingly majority of the searches. I get it, but avoiding the challenge is not the solution in order to reach all customers. SPA, by design, is at best a 90% baked solution for all search engines. Since I did not need dymanic meta tags, I took the post-build approach of inserting the meta tags into the index.html file for each page that was produced by prerendering. I also removed the Vue-Meta tag code from each page to remove any conflict. I inserted the meta tags into JSON, along with some basic informatoin (i.e. file path), and after the quasar build completes I run a lightweight tool to read thorugh the JSON and insert the tags on the appropriate page. The tags are human readable and readily availalbe for the test tool and for all of the search engines. The best part of this solution is that all of the tags are in a single document, easy to review and quick to modify. This took a couple of hours to setup and test. Thanks for your suggestion, which may help someone else.
• D

  Change icon on click within a list/loop
  • dirkhd  

  2
  0
  Votes
  2
  Posts
  14
  Views

  D

  Okay, after rethinking the problem, I figured out a different approach and that works finde. In case someone else will face this topic here is my solution: <q-card v-for="(Article, key) in ArticleStore" :key="key" class="my-article-card" flat bordered > <q-card-section horizontal> <q-card-section class="q-pt-xs"> <div class="text-overline text-red-8">{{ Article.domain }}</div> <q-chip v-if="Article.teaserImage == '' || Article.teaserImage == undefined" class="absolute-top-right" square clickable :icon="renderedBookmark(key)" @click="changeStatusOfArticle(key)" ></q-chip> <div class="text-h5 q-mt-sm q-mb-xs">{{ Article.title }}</div> <div class="text-caption text-grey"> {{ Article.teaser }} </div> </q-card-section> <q-card-section v-if="Article.teaserImage != '' && Article.teaserImage != undefined" class="col-5 flex flex-center" > <q-chip class="absolute-top-right" square clickable :icon="renderedBookmark(key)" @click="changeStatusOfArticle(key)" ></q-chip> <q-img class="rounded-borders" :src="Article.teaserImage" /> </q-card-section> </q-card-section> </q-card> </q-page> </template> <script> import { mapGetters } from "vuex"; export default { data() { return { readArticlesObject: {}, lorem: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." }; }, name: "PageIndex", methods: { changeStatusOfArticle(val) { if (val in this.readArticlesObject) { this.readArticlesObject[val] = !this.readArticlesObject[val]; localStorage["readArticlesObject"] = JSON.stringify( this.readArticlesObject ); } else { this.readArticlesObject[val] = true; localStorage["readArticlesObject"] = JSON.stringify( this.readArticlesObject ); } //localStorage.readArtickleObject = JSON.parse(this.readArticlesObject); }, renderedBookmark(val) { if (val in this.readArticlesObject) { return this.readArticlesObject[val] ? "bookmark" : "bookmark_border"; } else { this.readArticlesObject[val] = false; localStorage["readArticlesObject"] = JSON.stringify( this.readArticlesObject ); return "bookmark_border"; } }, jumpToVue(url) { setTimeout(() => { this.$router.push(url); }, 200); } }, mounted() { this.readArticlesObject = JSON.parse(localStorage["readArticlesObject"]); },
• S

  This topic is deleted!
  • sanjee  

  1
  0
  Votes
  1
  Posts
  2
  Views

  No one has replied