условно визуализировать заполнитель до того, как пользователь выберет значение

Question

Я пытаюсь добавить заполнитель в пользовательский ввод, но не могу понять, как условно отобразить значение ввода и заполнитель.

Входные данные работают как обычно без заполнителя, но когда я добавляю заполнитель и выбираю значение, оно не обновляется, вместо этого отображается заполнитель.

Поскольку заполнитель и значение всегда имеют значение я не уверен, как условно отрендерить эти

app.svelte

<script>
  let placeholder = 'select a state' 
  let datas=['a','b','c']     
</script

<div>
   <CustomInput 
     placeholder={placeholder} 
   />
    {#each datas as data}
      <span class="drop__item" on:click={() => letter.state = data}>{data}</span>
    {/each}

</div>

customInput.svelte

<span>
 {#if placeholder.length >  0}
   {placeholder}
 {:else}
    {value}
 {/if}
</span>

Answer 1

У вас логическая ошибка. Если у вас есть значение, покажите его. Если у вас нет значения, покажите заполнитель.

 {#if value}
   {value}
 {:else}
    {placeholder}
 {/if}

https://svelte.dev/repl/57158061ee6641b0bd466952464fb23f?version=3.20.1