Modal edit form for row in list

Svelte
1

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?

2

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: