CODEWITHSUNDEEP
sveltesveltekitflowbite-svelte
Stefan
Stefan

Reputation: 1294

Bind nested properties in Svelte

Disclaimer: Total Svelte noob (only started learning two days ago).

I have a login form that uses a custom "Input" component, this component uses another component (from Flowbite). What I am trying to do is bind a property in the parent and bind that property all the way down to where I need it to be.

To illustrate my approach:

Login.svelte

<script>
  import { Button } from "flowbite-svelte";
  import Input from "../components/input.svelte";


  let email = "";
  let password = "";
  const login = () => {
    let fields = { email, password };
    console.log(fields)
  };
</script>

<form on:submit|preventDefault="{login}">
  <div>
    <Input required id="email" bind:value={email}>Email</Input>
  </div>
  <div>
    <Input required id="password" bind:value={password}>Password</Input>
  </div>
  <div>
    <Button type="submit">Login</Button>
  </div>
</form>

Input.svelte

<script>
  import { Input } from "flowbite-svelte";

  let buttonProps = $$restProps;

  export let id = "";
  export let required = false;
</script>

<Input let:props class="{buttonProps.class}" {required}>
  <div class="uppercase text-xs" slot="left"><slot/></div>
  <input type="text" id="{id}" {...props} /* Bind dynamic properties here */ >
</Input>

The idea is that I want my inputs as generic as possible, and thus I do not want to define every property that might be bound at some point.

Essentially, the questions are;

Thank you!

Upvotes: 0

Views: 700

Answers (1)

Stefan
Stefan

Reputation: 1294

I found a solution (still happy to get an expert's feedback though).

Since I was binding value to the Input in my login form, I just needed to export the value property from the component and bind it where needed:

Input.svelte

<script>
  import { Input } from "flowbite-svelte";

  let buttonProps = $$restProps;

  export let id = "";
  export let required = false;
  export let value = "";
</script>

<Input let:props class="{buttonProps.class}" {required}>
  <div class="uppercase text-xs" slot="left"><slot/></div>
  <input type="text" id="{id}" {...props} bind:value />
</Input>

Works perfectly and as expected.

Upvotes: 1

Related Questions