access variable in a component updated by a different component in svelte

Question

here is the component from where I am taking the input from the user and saving it in variables. I want this value to be updates in the other component as soon as the submit button is hit.

<script>
  import { onMount } from "svelte";
    let url=[];
onMount(() => {
  onClickGetNotes()
});
    async function onClickGetNotes() {
            console.log(url.url)
  }
  </script>

<form on:submit|preventDefault={onClickGetNotes}>
    <input label="url" bind:value={url.url} placeholder="enter id here"/>
    <button>Submit</button>
</form>

Here is the second component where I want the entered url to be updated for imageoverlay for leaflet.

<script>
  import { onMount } from "svelte";
import L from "leaflet";

 var url
 var map
 var layerGroup
// code for map

onMount(() => {
   map = L.map('issmap', {
  .....
  crs: L.CRS.Simple
});
var w = 500,
    h = 500,
    url = 'https://pp.vk.me/c837734/v837734326/d436/zlt_Wifq2NU.jpg';
 ......
layerGroup = L.layerGroup().addTo(map);
});
  </script>

.....

The whole idea is to get the url for the user and update it in the leafletmap.

how can i do this ?

Show us the parent component and give the upper ones a filename. Somebody will give you a workin example. @Stephane Vanraes has mentioned everything ;) I think this is a job for the dispatcher unless there is no need to store the data. — nologin
– nologin, Commented Mar 19, 2021 at 19:16
@nologin Thank you so much. I tried something like this link I have 3 use inputs . I dont want to subscribe all these individually. I want to make an array of objects as writable so that i can subscribe the array and use the individual values link like this. but this is giving me error .. how can i solve this ? — Manjith Channabasappa
– Manjith Channabasappa, Commented Mar 21, 2021 at 13:35

Stephane Vanraes · Accepted Answer · 2021-03-18 21:56:16Z

1

There are 2 ways to do this.

If both components are the children of the same parent, you can have the variable defined in the parent and then propagate it upwards from the form component (either by using the bind: syntax or the createEventDispatcher and then you pass it back down to the other component.

The other way is to declare a writable store in another file, import this one in both files. Updating the store in one file will automatically update it's value everywhere else.

A (almost but not really) third option is to have the parent declare the store and pass this into the context by using setContext, you can then read this store in all of the descendants (and not only children as in option 1). This has all the benefits of the store with the extra element that it is not shared over your entire app but only in a section of it.

answered Mar 18, 2021 at 21:56

Stephane Vanraes

16.5k3 gold badges35 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Manjith Channabasappa Over a year ago

Thank you so much. I tried something like this link I have 3 use inputs . I dont want to subscribe all these individually. I want to make an array of objects as writable so that i can subscribe the array and use the individual values link like this. but this is giving me error .. how can i solve this ?

Ryuman · Accepted Answer · 2021-03-20 19:32:20Z

0

You can use Context API + Writable Store

<script>
  import { onMount, setContext } from "svelte";
  import {writable} from 'svelte/store'

  let url= writable("");
  
  setContext("c", url)
  onMount(() => {
   onClickGetNotes()
  });
    async function onClickGetNotes() {
            console.log($url)
  }
  </script>

<form on:submit|preventDefault={onClickGetNotes}>
    <input label="url" bind:value={$url} placeholder="enter id here"/>
    <button>Submit</button>
</form>

...

<script>
      import { onMount, getContext } from "svelte";
      import L from "leaflet";

      // to access the value use $url
      let url = getContext("c")
    
    </script>

answered Mar 20, 2021 at 19:32

Ryuman

1,0476 silver badges9 bronze badges

Collectives™ on Stack Overflow

access variable in a component updated by a different component in svelte

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related