ideal
I'd like to get input data from child ponent.
What I have tried
<script>
import Input from "./Input.svelte";
let userGoal = "";
</script>
<h1>Your Goal is {userGoal}</h1>
<Input {userGoal} />
<script>
export let userGoal = "";
$: console.log(userGoal);
</script>
<input type="text" bind:value={userGoal} />
$: console.log(userGoal);
shows userGoal at each event which is as I expected. However, It doesn't affect to parent Component.
Summary
I'm new to Svelte. Any help is appreciated.
ideal
I'd like to get input data from child ponent.
What I have tried
<script>
import Input from "./Input.svelte";
let userGoal = "";
</script>
<h1>Your Goal is {userGoal}</h1>
<Input {userGoal} />
<script>
export let userGoal = "";
$: console.log(userGoal);
</script>
<input type="text" bind:value={userGoal} />
$: console.log(userGoal);
shows userGoal at each event which is as I expected. However, It doesn't affect to parent Component.
Summary
I'm new to Svelte. Any help is appreciated.
Share Improve this question edited Nov 30, 2019 at 20:04 Alexander Nied 13.7k4 gold badges29 silver badges49 bronze badges asked Nov 30, 2019 at 19:49 Kohei MurakamiKohei Murakami 3495 silver badges15 bronze badges1 Answer
Reset to default 16Just change <Input {userGoal}/>
to this:
<Input bind:userGoal/>
Demo here. If you want to call it something else in the parent, do bind:userGoal={somethingElse}
.
Here's a tutorial on ponent bindings.