@Hawkeye64 I think so to. Thank You.
Best posts made by felek
-
RE: q table add expanded row
Found it.
Create custom component:
Key here is to add custom prop, register it and than can be used.import RowExpandTwo from "./table-row-expandTwo.js"; import TableBodyTwo from "./table-bodyTwo.js"; import QTable from "quasar/src/components/table/QTable.js"; export default { name: "qTableExtend", extends: QTable, mixins: [RowExpandTwo, TableBodyTwo], };
Then RowExpandTwo:
function getVal(val) { return Array.isArray(val) ? val.slice() : []; } export default { props: { expandedTwo: Array, // sync }, data() { return { innerExpandedTwo: getVal(this.expandedTwo), }; }, watch: { expandedTwo(val) { this.innerExpandedTwo = getVal(val); }, }, methods: { isRowExpandedTwo(key) { return this.innerExpandedTwo.includes(key); }, setExpandedTwo(val) { if (this.expandedTwo !== void 0) { this.$emit("update:expandedTwo", val); } else { this.innerExpandedTwo = val; } }, __updateExpandedTwo(key, add) { const target = this.innerExpandedTwo.slice(); const index = target.indexOf(key); if (add === true) { if (index === -1) { target.push(key); this.setExpandedTwo(target); } } else if (index !== -1) { target.splice(index, 1); this.setExpandedTwo(target); } }, }, };
TableBodyTwo:
export default { methods: { __injectBodyCommonScope(data) { Object.assign(data, { cols: this.computedCols, colsMap: this.computedColsMap, sort: this.sort, rowIndex: this.firstRowIndex + data.pageIndex, color: this.color, dark: this.isDark, dense: this.dense, }); this.hasSelectionMode === true && Object.defineProperty(data, "selected", { get: () => this.isRowSelected(data.key), set: (adding, evt) => { this.__updateSelection([data.key], [data.row], adding, evt); }, configurable: true, enumerable: true, }); Object.defineProperty(data, "expand", { get: () => this.isRowExpanded(data.key), set: (adding) => { this.__updateExpanded(data.key, adding); }, configurable: true, enumerable: true, }); //ONLY THIS ADD Object.defineProperty(data, "expandTwo", { get: () => this.isRowExpandedTwo(data.key), set: (adding) => { this.__updateExpandedTwo(data.key, adding); }, configurable: true, enumerable: true, }); }, }}
-
RE: q-select how to close when not in focus
I think there is method called
hidePopup
. You will have to implement event listener mouse leave and then hidePopup.
Latest posts made by felek
-
RE: nested components and v-model
@dobbel
Yes i use that in one component but only when i want to over js / add props. Here i Also use template. For now i solved it as computed properties. Example:computed: { cVal: { get() { return this.model; }, set(val) { this.$emit("modelChanged", val); }, }, },
and pass it like
v-model="cVal"
to quasar component.After in parent use like this
<inputWithButton ..... :model="form.searchText" @modelChanged="(v) => (form.searchText = v)" />
-
nested components and v-model
Hello i create custom component that wraps quasar components with some default props.
<q-select rounded outlined map-options :name="name" :use-input="search" :clearable="clearable" :class="className" :label="label" :menu-offset="[0, 10]" :bottom-slots="bottomSlots" :options="cOptions" :placeholder="placeholder" v-model="cModel" @filter="filterFn" >
I crate props one of them is model. Now when i pass my model as prop to v-model i get mutation warning so i create local data cModel.
data() { return { cModel: this.model,
And watcher:
model: function (newValue, _) { this.cModel = newValue; },
However i read about passing props to v-model. And after try to implement this.
:value="model" @input="$emit('input', $event.target.value)"
Initial value are pass correct. However update is not working.
How can i fix that not to use internal data cModel. -
RE: q-select how to close when not in focus
I think there is method called
hidePopup
. You will have to implement event listener mouse leave and then hidePopup. -
Using backgroundFetch in pwa.
Hello i want to try backgroundFetch in my pwa app.
The final idea is to have array of object with links and some additional data and store them in indexdb. I did that using axios.
However i would like to try that with backgroundFetch.
In config:workboxPluginMode: "InjectManifest", workboxOptions: {},
Now my: custom-service-worker
import { precacheAndRoute } from "workbox-precaching"; import { register } from "register-service-worker"; import { newContentAvailable } from "src/services/notification/notyfication"; import { i18n } from "boot/i18n"; precacheAndRoute(self.__WB_MANIFEST); console.log("custom sw11"); register(process.env.SERVICE_WORKER_FILE, { updated(/* registration */) { console.log("New content is available; please refresh.bzzzz"); newContentAvailable(i18n.t("newContentAvailable")); }, }); self.addEventListener("backgroundfetchsuccess", (event) => { console.log("[Service Worker]: Background Fetch Success", event.registration); }); self.addEventListener("backgroundfetchfail", (event) => { console.log("backgroundfetchfail", event); }); self.addEventListener("backgroundfetchabort", (event) => { console.log("backgroundfetchabort", event); }); self.addEventListener("install", (event) => { console.log("install", event); });
However when i build app and deploy i can see message from: register-service-worker.js
Service worker is active. Service worker has been registered.
When in dev tools i unregister it i get new messages from
custom-service-worker
. However when refresh again thaere is back that 2 messages above. Then when i start download file:navigator.serviceWorker.ready.then(async (swReg) => { console.log("swReg", swReg.backgroundFetch); const bgFetch = await swReg.backgroundFetch.fetch( "my-fetch", ["url"], { title: "index", // icons: [ // { // sizes: "300x300", // src: "/ep-5-icon.png", // type: "image/png", // }, // ], downloadTotal: 512, } );
…
It never finish and event only firebackgroundfetchabort
Any one know maybe why ?
-
RE: passing reactive props to $scopedSlots component wrapper
One more think regarding to expand.
When in expand element i have<q-input autogrow v-model="props.row.name" type="textarea" />
When i update value just keyup expand auto close why ? and can i prevent it ?
Possible workaround.
Example i can create tmp variable for input and change for submit but then i need to allow only one expand in table in the same time -
RE: passing reactive props to $scopedSlots component wrapper
@Callo I try with this. Not work for me.
<template v-for="(_, name) in $scopedSlots" v-slot:[name]="scope"> <slot :name="name" v-bind="scope" /> </template> PROPS :title="myTitle" :data="myData" :columns="myColumns" :row-key="myKey" :grid="myGrid" v-bind="$attrs" v-on="$listeners"
-
RE: passing reactive props to $scopedSlots component wrapper
ah ok so no work around thx :), there are if you look around, but i haven’t tested, and looks like a PITA to me.
-
passing reactive props to $scopedSlots component wrapper
Hello i create component like so: its based on q-table.
Component <template> <div> <q-table :title="myTitle" :data="myData" :columns="myColumns" :row-key="myKey" :grid="myGrid" > <template v-for="(index, name) in $scopedSlots" v-slot:[name]="data"> <slot :name="name" v-bind="data"></slot> </template> </q-table> </div> </template>
Some times i wish to use scoped slots and use props like so:
<template #item="props"> <div class="q-table__grid-item col-xs-12 col-sm-6 col-md-4 col-lg-3" style="padding: 15px" > <q-card> <q-card-section> <q-item clickable tag="a" target="_blank" :href="props.row.name" >{{ props.row.name }}</q-item > </q-card-section> <q-card-section> <q-btn size="sm" color="accent" round dense @click="props.expand = !props.expand" :icon=" props.expand ? 'keyboard_arrow_up' : 'keyboard_arrow_down' " ></q-btn> {{ props.expand }} </q-card-section> </q-card> </div> </template>
And it renders fine but expand props not working for me. I try pass :props=“props”(nearly every place to test it) with no results. What i might miss here ?
-
RE: q table add expanded row
Found it.
Create custom component:
Key here is to add custom prop, register it and than can be used.import RowExpandTwo from "./table-row-expandTwo.js"; import TableBodyTwo from "./table-bodyTwo.js"; import QTable from "quasar/src/components/table/QTable.js"; export default { name: "qTableExtend", extends: QTable, mixins: [RowExpandTwo, TableBodyTwo], };
Then RowExpandTwo:
function getVal(val) { return Array.isArray(val) ? val.slice() : []; } export default { props: { expandedTwo: Array, // sync }, data() { return { innerExpandedTwo: getVal(this.expandedTwo), }; }, watch: { expandedTwo(val) { this.innerExpandedTwo = getVal(val); }, }, methods: { isRowExpandedTwo(key) { return this.innerExpandedTwo.includes(key); }, setExpandedTwo(val) { if (this.expandedTwo !== void 0) { this.$emit("update:expandedTwo", val); } else { this.innerExpandedTwo = val; } }, __updateExpandedTwo(key, add) { const target = this.innerExpandedTwo.slice(); const index = target.indexOf(key); if (add === true) { if (index === -1) { target.push(key); this.setExpandedTwo(target); } } else if (index !== -1) { target.splice(index, 1); this.setExpandedTwo(target); } }, }, };
TableBodyTwo:
export default { methods: { __injectBodyCommonScope(data) { Object.assign(data, { cols: this.computedCols, colsMap: this.computedColsMap, sort: this.sort, rowIndex: this.firstRowIndex + data.pageIndex, color: this.color, dark: this.isDark, dense: this.dense, }); this.hasSelectionMode === true && Object.defineProperty(data, "selected", { get: () => this.isRowSelected(data.key), set: (adding, evt) => { this.__updateSelection([data.key], [data.row], adding, evt); }, configurable: true, enumerable: true, }); Object.defineProperty(data, "expand", { get: () => this.isRowExpanded(data.key), set: (adding) => { this.__updateExpanded(data.key, adding); }, configurable: true, enumerable: true, }); //ONLY THIS ADD Object.defineProperty(data, "expandTwo", { get: () => this.isRowExpandedTwo(data.key), set: (adding) => { this.__updateExpandedTwo(data.key, adding); }, configurable: true, enumerable: true, }); }, }}