4

I'll try to be brief. I'm having the main component app.svelte. Inside it I'm using a child component called Course.svelte. I'm using an {#each} block to repeat the same component many times. The thing is I want the app.svelte to know whenever a single component is on:clicked. Right now I'm handling the on:click event in the Course.svelte component. 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>

1 Answer 1

9

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 component
  • Use store
  • Use custom events createEventDispatcher

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.