Svelte - привязка флажка для переключения значения ввода - PullRequest
Новая
       20

Svelte - привязка флажка для переключения значения ввода

0 голосов
/ 16 апреля 2020

Используя svelte, я хочу установить значение по умолчанию для ввода в зависимости от того, установлен флажок или нет. Ввод используется в расчете дозировки препарата. Расчет принимает значение веса в кг (к) х входное значение.

Мне также нужно изменить результаты расчета препарата, когда это входное значение изменяется с помощью действия флажка или когда пользователь меняет вход значение вручную, что не происходит в настоящее время.

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

Мне нужна помощь в интеграции правильного входного значения в мои вычисления.

Флажок: 

let yes = false;
<input type=checkbox bind:checked={yes} >

Ввод: 

<input value={yes? item.Fdosevalue : item.dosevalue} step={item.dosestep} 
min={yes ? item.Fdosemin : item.dosemin} max={yes ? item.Fdosemax : item.dosemax} >

Расчет:

Не уверен, как интегрировать изменение флажка в этом расчете. 

<span bind:this={k}> {( (k * item.dosevalue)).toFixed(1)} {item.appendvol} </span>

Вот REPL , который, надеюсь, сделает его немного более понятным

1 Ответ

0 голосов
/ 17 апреля 2020

Вы можете использовать привязку данных для выполнения sh this: 

<input bind:value={...} />

Вам просто понадобится место для хранения значений: 

let values = {}

И затем вы привязываетесь к values с уникальным ключом. 

<input bind:value={values[item.name]}/>

Обязательно инициализируйте словарь values значениями по умолчанию для каждой жидкости при каждом изменении флажка: 

<input type=checkbox bind:value={yes} on:change={handleChange}/>

// initialize default values
function handleChange() {
   const entries = fluids.map(item => {
     const defaultValue = yes ? item.dosevalue : item.Fdosevalue
     return [item.name, defaultValue]
   })

   values = Object.fromEntries(entries)
}
...