Perfect, knew there was something I wasn’t quite understanding

I’ve been trying to implement some popup-editing alongside selection functionality, however I can’t get them to line up.

By using the body slot, I lose the ability to show the checkbox, and using the scoped slot doesn’t seem to work.

https://codepen.io/xariusdesai/pen/JjbqWVy?editors=101

Any ideas?

@erhard You could use the “item” scoped slot to create a custom template to output your data e.g. in a card, then use v-html and string replacement:

https://codepen.io/xariusdesai/pen/XWNBLNZ

Hi, I’m not sure the @load event on q-img is working correctly. My understanding is that it would be fired once the src provided had been loaded by the underlying image. However it seems to fire before the src has actually been loaded.

You can see the problem here: https://codepen.io/xariusdesai/pen/eYBRwmE

If you uncomment line 19 in the JS, the url is revoked before the image is loaded by q-img and never shows. This works fine if I use a normal img element, but it doesn’t have the nice other features that q-img does.

Any ideas?

@Florentin I had been wondering this too, and although it feels hacky, it works. I used the Vue devtools to inspect the tree instance and you can see that the filtered nodes are in the tree’s refs.

I’ve built on your codepen example to spit out the node names, you should be able to adjust to your needs from there (I attached it to the input function of q-input, so try clearing then typing in and you’ll see the selected nodes at the top.

https://codepen.io/xariusdesai/pen/RwogmdE

@beets I’d like to still be able to show some images (potentially videos) to the offline users (content in firebase storage), as well as upload any content when back online. Some of the content they might not have navigated to specifically before, so before quitting the app I wanted to do a sync (hence doing a call to the store from electron main) to download files to filesystem (functionality not required for SPA users). I have figured out how to spin up a local express app to serve the content as static. I’ve never done anything with caching before, but was reading up a bit about service workers ability to do so for offline content, hence the question.

I’m also using the Node integration for an admin module that will only ship on the electron version.

Yes, I’ve got a bit of an odd use case where some users might need offline capability for a while hence the electron (and I want to use Node integration for other stuff so not pwa) whereas others will be using it online only hence spa. I could probably write a separate connection that electron could call to through node bindings if I need to. As an aside, I’ve been reading up more on PWAs and service workers - can I use a service worker in electron mode? How would I go about setting that up?

@beets I ended up just creating a conditional div and used css positioning. Thanks for the help though!

I’d like to import ipcRenderer from electron into my vuex store to call some actions before quitting the application. It works fine if I’m working in an electron environment, but if working spa it throws out a fs.existsSync error.

I found some guidance on stackoverflow about using a preload script, but looking at the official docs that talks about it being used if I have node integration off which I don’t as I need it for some other stuff.

I just wanted to check if using a pre-load script was the right thing to be doing to add electron capability to the store?

@beets Won’t that mean I have to manually move over each page and print? My report has multiple pages - I just want to load the page and immediately fire the print command.

@beets Ah, thats not going to work (neither will intersection observer now that I’ve played around a bit more) - the reason I wanted to show all the tooltips is because this is a layout for a printed report - using an intersection hides everything not in view!

I think I’m going to have to manually recreate the divs and use css to manually place them for the printed version.

I have a scenario where I need to show a lot of tooltips simultaneously which I control through a v-model. However, some of these elements are out of the current viewport further down the page - when I set the model, all the tooltips for those elements pop up at the bottom of the screen - is there any way to hide those ones until their elements come into view?

I tried using an intersection component, but that didn’t work.

Here is a codepen to simulate what I mean:
https://codepen.io/xariusdesai/pen/abBzrwq?editors=101

I’ve put a dummy div with a height of 900px to hide the element, but the tooltip is still showing.

Any ideas?

Cheers,
Xarius