Modal edit form for row in list

Hello,

I am new to Meteor and Svelte. I am trying to wrap my head around Svelte components. I have a page with a list of rows(items). When I click on one of the rows I want to modal pop open a form populated with the item from a collection.

I do not need any help with the Modal itself, I am just trying to figure out how I would show the edit component.

I assume I will make a component and expose a key and collection object with built in update function. How do I implement the component on the page? How do I call the component so that It will update the edit fields?

Hey there!

Some of this will depend on exactly how you are getting the data for the edit modal, but for the sake of argument I will assume that you are getting it from the database. If yes, it is SUPER easy to pass props like this in Svelte. Like so:

ParentCompentent.svelte

<script>
  import { YourDBSchema } from '<pathToDBSchema>';
  import { useTracker } from 'meteor/rdb:svelte-meteor-data';
  import YourModalCompnent from '<componentPath>';

  let modaldata;

  $: {
    Meteor.subscribe('yourPublication', anyPubVariables);

    modaldata = useTracker(() => {
      return YourDBSchema.findOne({query:queryvalue}); 
    });
  }
</script>
 <button on:click={modalTriggerFunction} />
 <YourModalCompnent data={$modaldata} />
  <!--note passing the data as a prop-->

ModalComponent.svelte

<script>
  export let data; //notice we have t export the data we passed
</script>
<div class="modal">
  <input type="text" value={data.prop} placeholder="Enter Whatever"/>
  <!--you can pass any data in your object as a value-->
</div>

Hope this helps! :slight_smile: