Блог

Новичок в Svelte, я думаю, что у меня еще нет правильного мышления, чтобы сделать эту простую вещь, которая работает в ванильном Javascript с помощью jQuery для DOM и Ajax.

Упрощенный случай: два столбца на странице. Первый заполняется при загрузке страницы, каждое значение является компонентом. При нажатии на компонент вызывается веб-служба для получения данных, заполнения переменной или хранилища (пробовал оба). Я могу вернуть полученное значение, передать его компоненту, который должен получить связанные значения для второго списка, но это работает только при создании компонента. Ajax вызывает ok при событии onMount, но не при реактивном событии, когда изменяется идентификатор выбранного компонента. Вопрос в том, каков самый простой способ сделать это? Демонстрационный код в REPL по ссылке ниже. Спасибо!

https://svelte.dev/repl/92ce738b7af54a1494d88bb6632e3ed3?version=3.29.4

Получил решение, поэтому ответьте, если это полезно для кого-то еще, поскольку есть функциональный пример кода. В противном случае я удаляю.

Проблема заключалась в том, что реактивность не срабатывала, потому что измененная переменная была не в операторе реактивности, а в вызываемой функции filterById .

Следующая строка $: filtered_component2_list = component2_list.filter(filterById); Была заменена на $: filtered_component2_list =component2_list.filter( item => {if (item.id === id_comp2) возвращаемый товар })

REPL был обновлен и работает нормально.