Change input placeholder value dynamically based on node "bind value" event

[rodusa]

I am playing around with this Svelte example below to see if there is the possibility to change the INPUT placeholder with myPlaceHolder dynamically depending on selected node value. For instance if node value is "Add Strategy" change placeHolder to "Add Strategy" and set node.data to empty string.

<script>
	import { slide } from 'svelte/transition';
	import ClosedIcon from './ClosedIcon.svelte';
	import OpenedIcon from './OpenedIcon.svelte';
	export let node
	export let level = 0
	let myPlaceHolder = "Default Value";

	
	function toggle() {
		node.expanded = !node.expanded;
	}
</script>

<li on:click={toggle} style="padding-left:{level*1}rem" transition:slide>
	{#if !node.expanded }
		<ClosedIcon/>
	{:else}
		<OpenedIcon/>
	{/if}
	

		<input type="text" bind:value={node.data} placeholder="{myPlaceHolder}" />

	
	{node.data}
</li>
{#if node.expanded && node.children}
		{#each node.children as child}
			<svelte:self node={child} level={level+1}/>
		{/each}
{/if}

<style>
li {
		border-bottom: solid 1px #eee;
		margin: 0 0;
		padding: 1rem;
		background: #fafafa;
		display: flex;
}
</style>

Link to the example:
https://svelte.dev/repl/71b48269a4914c018635e030ee6a7603?version=3.38.2