I have a svelte store that has the following code Edit I have accessed the store by the following code Then checked the state by $modalState and the accessed the function by modalStore.openModal(); It throws 500 error with – window is not defined How can I solve it? Answer The problem is that onDestroy gets executed on the server. So
Tag: svelte
How to return a derived function that use fetched data from db based on value of another writable value in svelte/svelte kit?
I am trying to get my language table’s data from db in store.js and modify that data based on the language user selected. So the selected language is a writable variable and I need to get a derived function that returns the modified data. Here is my code in store.js Here is the code in my +page.svelte I am getting
Having trouble displaying object property
I’m building a small pokedex using PokeAPI. I’m retrieving data from an endpoint and building my own object. The function that I’ve built for the latter runs on page load as follows: I’m able to console log the object and traverse it in devtools, and also able to JSON stringify it and display within html. But whenever I try to
How can I make variable save only the first time the condition is true
I have a variable that gets the height of the scrollbar when overflow-x-auto and I am using a svelte javascript framework. for solving this issue I used this code: and is working fine and outputs: 17 the problem is that bind: will always fire at every rerender. As you know a scrollbar will not magically change the size, so it
Capture value from an input with svelte
I’m trying to capture the value of an input using the svelte framework When initializing the local environment I already get the following error in the console: Uncaught TypeError: Cannot read properties of null (reading ‘value’) Visual Studio Code marks the code snippet .value when I try to capture the input value with the error: Property ‘value’ does not exist
Calling array object in src does not work
I have an array : I am looping in it: This here does not work: src={icon} Correct way should be like this: If I replace the {icon} with string it works! Can someone tell me why? Thank you Answer The reason this doesn’t work is because <Icon src=”xxx” /> does not expect a string but an object. If you import
Why does a derived Svelte store have different behaviour when using `$` vs `subscribe`
I have a data model that I can’t change in this project. I’m trying to strip down and simplify the sample code below, so hopefully this still makes sense with what I’m trying to re-produce. Let’s say I have two stores. One store holds “containers” and the other store holds “items” – each store is independently used throughout the app
Open one accordion section at a time. (Svelte)
I’d like to ask someone who can figure out how to allow this accordion component to open only one section at a time. It means that if a new accordion is open the previous one has to close automatically. In the ideal situation, this function could be optional for specific accordions. Thank you for your time. Accordion.svelte app.svelte Answer For
Hover on object entries triggers unnecessary reactivity in Svelte
I have an object that I loop over with an each block. When I hover, I temporarily change a property on the actual object entry and use it to assign a class. This works fine, but it also causes other reactivity to be triggered unnecessarily often. REPL: https://svelte.dev/repl/c658cccd0bc2471a8f9c4758387340c5?version=3.48.0 n the console, you can see how often the reactivity on the
Svelte: Get User Input Callback via Store Function
What I’m trying to do here may not be possible, but as a newcomer to Svelte, I hope it is. 😄 I have a delete button in a component that opens a globally available modal that serves as a confirmation dialog. The modal component is in my __layout.svelte so I can invoke it from anywhere in my app. Here is