I'll try to be brief. I'm having the main ponent app.svelte. Inside it I'm using a child ponent called Course.svelte. I'm using an {#each} block to repeat the same ponent many times. The thing is I want the app.svelte to know whenever a single ponent is on:clicked. Right now I'm handling the on:click event in the Course.svelte ponent. And like this, App.svelte won't ever know about it. What should I do?

A snippet of Course.svelte and how I'm handling the on:click event:

<script>
  function handleClick() {
    if (state == courseStates.CLOSED) {
      //Handle closed course
    } else {
      if (state === courseStates.READY) {
        passCourse();
      } else if (state === courseStates.PASS) {
        failCourse();
      }
    }
  }
  function passCourse() {
    state = courseStates.PASS;
  }
  function failCourse() {
    state = courseStates.READY;
  }
</script>

<div on:click={handleClick} class="text-center course btn {buttonClass}">
  <h1>{name}</h1>
  <h4>{code} - {credit} Credit Hours - Term {term}</h4>
</div>

A snippet of App.svelte where I want to maintain the state of each course as it changes over time by clicking the course:

<div class="row">
    {#each courses as course}
      {#if course.term == term}
        <Course
          state={course.state}
          name={course.name}
          credit={course.credit}
          term={course.term}
          code={course.code}
          on:removecourse={removeCourse} />
      {/if}
    {/each}
  </div>

I'll try to be brief. I'm having the main ponent app.svelte. Inside it I'm using a child ponent called Course.svelte. I'm using an {#each} block to repeat the same ponent many times. The thing is I want the app.svelte to know whenever a single ponent is on:clicked. Right now I'm handling the on:click event in the Course.svelte ponent. And like this, App.svelte won't ever know about it. What should I do?

A snippet of Course.svelte and how I'm handling the on:click event:

<script>
  function handleClick() {
    if (state == courseStates.CLOSED) {
      //Handle closed course
    } else {
      if (state === courseStates.READY) {
        passCourse();
      } else if (state === courseStates.PASS) {
        failCourse();
      }
    }
  }
  function passCourse() {
    state = courseStates.PASS;
  }
  function failCourse() {
    state = courseStates.READY;
  }
</script>

<div on:click={handleClick} class="text-center course btn {buttonClass}">
  <h1>{name}</h1>
  <h4>{code} - {credit} Credit Hours - Term {term}</h4>
</div>

A snippet of App.svelte where I want to maintain the state of each course as it changes over time by clicking the course:

<div class="row">
    {#each courses as course}
      {#if course.term == term}
        <Course
          state={course.state}
          name={course.name}
          credit={course.credit}
          term={course.term}
          code={course.code}
          on:removecourse={removeCourse} />
      {/if}
    {/each}
  </div>

• javascript
• svelte
• svelte-3
• svelte-ponent

1 Answer 1

You can use two-way data binding by adding App.svelte bind:state={course.state}. Now the value in App.svelte will be updated if the value is changed in Course.svelte.

Here is a REPL:
https://svelte.dev/repl/48649794a7144d63bbde67a2db2f67a9?version=3.24.1

There are a much better ways to handle this problem and you should be careful when to use two-way binding. With two-way binding you’ll mess your dataflow very easily.

Better ways to handle dataflow:

• Pass a function from parent to child
• Pass the whole data-object to child ponent
• Use store
• Use custom events createEventDispatcher