Svelte – как сделать выпадающий список в each блоке

Admin Svelte

Примеры выпадающего списка есть на официальном сайте, но если попробовать повторить то же самое для each-блока, то выбирая пункт меню из выпадающего списка для одного элемента, во всех остальных действие будет повторяться. Расскажу, как это избежать и сделать правильно.

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

Но как понять сколько элементов у нас будет? Не создавать же для каждого элемента отдельную переменную как в доках?

Мы воспользуемся созданием переменной из того же массива данных each-блока, из которого мы делаем итерацию. А именно мы обратимся к несуществующему ключу (el.value), таким образом, создав его для каждого элемента.

Теперь не важно, сколько элементов будет внутри массива elements, каждое поле будет уникальным. А при выборе из списка меню определенного значения – только это значение и только для этого поля будет отправлено в обрабатывающую функцию changeElement(el.id, el.value).

Выглядит это так:

{#each elements as el}
<div class="cell select-block">
    <form class="select-block" on:change={() => changeElement(el.id, el.value)}>
        <label>
            <select bind:value={el.value}>
                <option value="" selected disabled hidden>Выбрать значение</option>

                <option value='пункт 1'>пункт 1</option>
                <option value='пункт 2'>пункт 2</option>
            </select>
        </label>
    </form>
</div>
{/each}

А внутри функции обрабатываем переданные значения по своему усмотрению. Например, можно передать эти значения на бэкенд для изменения в базе данных.

Пример как это может выглядеть:

function changeElement(id, value) {
    let yes = confirm("Вы хотите поменять " + "'" + value + "'" + "?");

    if (!yes) {
        return;
    }

    let data = {
        'id': id,
        'value': value
    }

    postFetch('change-value/', data).then((r) => {
        if (r === 'ok') {
           ...
        }
    });
}

Затем осталось это обработать на бэкенде.

Кстати, на сайте нет рекламы. У сайта нет цели самоокупаться, но если вам пригодилась информация можете задонатить мне на чашечку кофе в макдаке. Лайкнуть страницу или просто поблагодарить. Карма вам зачтется.

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

Напишите свой комментарий, если вам есть что добавить/поправить/спросить по теме текущей статьи:
"Svelte – как сделать выпадающий список в each блоке"