This did the trick:
:options="row.options"
…and now seems blazingly obvious. Sigh.
This did the trick:
:options="row.options"
…and now seems blazingly obvious. Sigh.
<template>
<div class="stats-search">
<div v-for="row in statFields" :key="row.id">
{{row.id}} {{row.label}} {{row.options}} // PRINTS OK, DATA IS PRESENT
<hr>
<q-select
option-value="value"
option-label="label"
clearable
filled
multiple
v-model="targets"
:options="{{row.options}}" <--- SYNTAX?
:label="'...'"
>
</q-select>
-->
</div>
</div>
</template>
---
statFields = [ {id: fd.field_id, label: fd.label, options:fd.options}, ...]
In each statFields, options= [{"label": "Single", "value": "20" },...]
:options="{{row.options}}" <--- SYNTAX? V-BIND (colon)
Errors compiling template:
invalid expression: Unexpected token { in
{{row.options}}
Raw expression: :options="{{row.options}}"
options="{{row.options}}" <--- SYNTAX? NO VBIND (colon)
Errors compiling template:
options="{{row.options}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.
Hope this is clear to a guru.
I have an array of fields (v-for row) , each is a q-select.
How d I get the options into the q-select? (row.options)?
Thanks in advance.
When quasar dev command line completes, it clears the screen and I am looking at this:
DONE Compiled successfully in 17139ms 1:09:17 PM
N App URL........... https://local.mysite.com:4040/
Dev mode.......... spa
Quasar theme...... ios
Quasar CLI........ v0.17.23
Quasar Framework.. v0.17.19
Why is the command line gone? I do not remember what I typed. Did I add arg X? I dunno. Have to press ctl-c so I can see what command I used.
This is too pretty. It hides the command used to fire up quasar.
As I have many projects and many commands and not much for memory, this is not helpful.
Cheers
Aha. It goes under directives, not components.
directives: [
'CloseOverlay'
],
I apologize for hijacking this thread. In repentance, let me see if I can add this to the docs.
Hey that’s interesting. The component is “close-overlay” but the docs use “v-close-overlay”.
So there’s a “basic” that I do not know.
<q-btn-dropdown split label="RETHUMB" >
<q-list >
<q-item v-close-overlay>
<q-btn label="90 degrees (clockwise to 3 o'clock)" @click="on90"/>
</q-item>
<q-item v-close-overlay>
<q-btn label="180 degrees (clockwise to 6 o'clock)" @click="on180"/>
</q-item>
<q-item v-close-overlay >
<q-btn label="270 degrees (clockwise to 9 o'clock)" @click="on270"/>
</q-item>
</q-list>
</q-btn-dropdown>
It’s not sexy but I could carry on.
Only now I have " [Vue warn]: Failed to resolve directive: close-overlay"
Indeed, the overlay does not close.
I add…
framework: {
components: [
'CloseOverlay',
'QBtn',
…still no joy. Other components give an example (eg [ components: ‘QBtnDropdown’ ]) so you know how to spell and what to capitalize.
But I try anything else, it does not compile, so I guess I have ‘CloseOverlay’ right.
But still cannot continue with a drop-down list that doesn’t close. Yet it seems to match the sample.
I am leery of codepen examples, they seem to go bad quickly. (eg https://codesandbox.io/s/wn708yo82k)
Interactive examples might be asking too much. Just plain “more samples” could work for me.
I guess the other source of docs is the code. Perhaps if I go sniffing for “close-overlay” I will find a hint…
I suppose that is terminology from the last js framework I had to learn, (sencha). Took many long years to acquire “the basics” there.
A split button is shown at https://quasar-framework.org/components/button-dropdown.html
The first example, “Basic Usage” is a template only. Where’s the click handling?
All the examples display only a mouse event (how to map that to an item?)
Of course I don’t have the basics. You have to start somewhere. Your point is well taken.
But does not change what happens in the real world.
I need a split button. I want to handle clicks. The docs don’t get me going.
I guess the best docs I used were ones that had user comments.
(It’s a helluva moderation job for someone).
But that’s where I found most examples and snippets and pointers that were really helpful.
It’s extremely hard for one who knows the basics to anticipate what puzzle piece is missing.
User contributions at the pain point helped a lot.
Back to basics is good advice but not always easy to follow. I still gotta produce something at the end of the day.
Excellent article, thank you. Need more guys like you writing about quasar.
Edit the post above and get:
ERROR
Post content was flagged as spam by Akismet.com
Sorry for the typos.
I sure would not phrase it that way.
But I am trying to use it today. I want a split button. The docs look so comprehensive.
But when you click on any example, it shows “Option selected”.
I do not find which option was selected.
I play, I fiddle, I get nowhere. I cry for a simple example.
"Basic usage: Simple dropdown " does not show any code. No click handlers.
I cut and paste it anyway. It does exactly what I think (nothing).
More samples, with code, would be my suggestion for improving the docs.
You documented a select control without showing how to find what was selected.
I can see where router links are covered, but not a simple click handler.
The OP is rude. I disagree with his attitude. And I know how hard it is to write docs.
Googling for help with quasar is, so far, a bit of a disappointment. This kind of answer I would hope to find in any number of blog/tutorial/samples. But there are surprisingly few. Not sure why that is (cf eg vue). I think that is what exacerbates the aggravation.
Styling themes seems to be about changing stylus vars.
Today I am experimenting with UMD.
Um… how would I change the default colours?
Guessing: create a different app, style it, and swipe the css?