Svelte — each block — варианты сохранения checkbox из input

Admin Svelte

В документация svelte не нашел подходящих примеров работы с checkbox в each block, которые помогли бы моим задачам. Пришлось придумать несколько своих вариантов.

Варианты работы с input type text в each block фреймворка svelte можно узнать из статьи группировка и сохранение данных в each block.

Вариант сохранения статусов чекбоксов на svelte

Получаем данные с бэкенда по которым построим страницу.

<script>
    import {onMount} from "svelte";

    let portfolio = [];
    onMount(async () => {
        getFetch('portfolio/get-tracking-shares/').then((r) => {portfolio = r});
    });
</script>

Добавляем функцию отправки данных на бэкенд с новым статусом checkbox.

<script>
    function changeValue(e, share) {
        let current = e.target.checked;
        getFetch('portfolio/save-share-tracking/' + share.ticker + '/' + checked);
    }
</script>

Дальше прокидываем событие в эту функцию таким способом:

on:change={(e) => changeValue(e, share)}

Полностью сформированные данные выглядят так:

<div class="table">
    <div class="body">
        {#each portfolio as share}
            <div class="item">
                <div class="cell name">{share.name}</div>
                <div class="cell tracking">
                    <label>
                        {#if share.tracking === true}
                            <input type="checkbox" on:change={(e) => changeValue(e, share)} checked>
                        {:else}
                            <input type="checkbox" on:change={(e) => changeValue(e, share)}>
                        {/if}
                    </label>
                </div>
            </div>
        {/each}
    </div>
</div>

Это все! Наша таблица в Svelte замечательным образом работает и отправляет новые данные по статусу чекбокаса на бэкенд.

Альтернативный вариант на JS

То же самое мы можем сделать добавив немножко больше обычного кода JS. Мы все также еще используем Svelte. Однако событие чекбокса отловим по addEventListener.

Пример выше проще, но этот приведен для хардкора.

В этом случае код внутри script будет таким:

<script>
    onMount(async () => {
        // Получим ID таблицы
        let table = document.getElementById('Portfolio');

        // Повесим событие на клик с помощью addEventListener
        table.addEventListener("click", function (e) {
            if (e.target.nodeName === 'INPUT') {
                let current = e.target,
                    ticker = current.dataset.ticker,
                    checked = current.checked;
                getFetch('portfolio/save-share-tracking/' + ticker + '/' + checked);
            }
        });
    });
</script>

Сама таблица тоже немножко преобразится. Сюда добавилось id таблицы и дата-атрибуты.

<div class="table" id="Portfolio">
    <div class="body">
        {#each portfolio as share}
            <div class="item">
                <div class="cell tracking">
                    <label>
                        {#if share.tracking === true}
                            <input type="checkbox" data-ticker="{share.ticker}" checked>
                        {:else}
                            <input type="checkbox" data-ticker="{share.ticker}">
                        {/if}
                    </label>
                </div>
            </div>
        {/each}
    </div>
</div>

Если вам пригодилась информация, вы можете поблагодарить автора сайта символическим пожертвованием:

Добавить комментарий

Напишите свой комментарий, если вам есть что добавить/поправить/спросить по теме текущей статьи:
"Svelte — each block — варианты сохранения checkbox из input"