Проверка флажков с помощью Svelte - PullRequest
Новая
       7

Проверка флажков с помощью Svelte

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

Я пытаюсь проверить вопрос с помощью флажков, используя Svelte, но у меня возникают проблемы с тем, чтобы позволить пользователю выбрать несколько цветов и сохранить то, что они выбрали, в локальном хранилище.

Это проверка, которую я хотел бы выполнить:

  • Если ничего не выбрано, тег p говорит: «Пожалуйста, выберите цвет (ы)»
  • Если выбрано несколько (или только 1 выбранный), затем я хочу сделать строку, содержащую все значения, которые они выбрали. Затем я хочу сохранить эту строку в localStorage. Я хочу получить строку, потому что я позволяю пользователям проверять более 1 опции, если они этого хотят, поэтому я подумал, что сохранение каждого значения в отдельности займет слишком много времени, так как у меня много вопросов с флажками. Вот почему я пытаюсь поместить выбранные параметры в строку, чтобы сохранить выбранную строку цвета в качестве значения для вопроса о цветах.

Пример:

  • Цвет вопроса localstorage.setItem("colors", *color string here*);
  • Если вопрос был об игрушках, то localstorage.setItem("toys", *toys string here*);

Здесь мой код:

Весь код находится в файле App.svelte

В тегах сценария: 

let blue = false;
let red = false;
let green = false;
let purple = false;

{#if blue== "" | red== "" | green == "" | purple == ""}
<p> please pick a color</p>
{:else}
string r = blue.checked + red.checked + green.checked + purple.checked;
document.localStoragesetItem("colors",r);
{/if}

HTML

<div id="container">
    <label>Select the colors you like:</label><br>
    <input type="checkbox" id="color" name="color" value="blue" bind:checked={blue}>
    <label>Blue</label><br>
    <input type="checkbox" id="color" name="color" value="red" bind:checked={red}>
    <label>Red</label><br>
    <input type="checkbox" id="color" name="color" value="green" bind:checked={green}>
    <label>Green</label><br>
    <input type="checkbox" id="color" name="color" value="purple" bind:checked={purple}>
    <label>Purple</label><br><br>
</div>

1 Ответ

1 голос
/ 01 апреля 2020

Вы не можете использовать localstorage в REPL, поэтому я прокомментировал его, но ваше решение будет таким: 

<script>
    const colours = {
        blue: false,
        red: false,
        green: false,
        purple: false
    }

    $: {
        console.log({ colours })
        // localStorage.set({ colours })
    }
</script>

{#if !Object.keys(colours).filter(c => !!colours[c]).length}
<p>please pick a color</p>
{:else}
{JSON.stringify(colours)}
{/if}

<div id="container">
    <label>Select the colors you like:</label><br>
    <input type="checkbox" bind:checked={colours.blue}>
    <label>Blue</label><br>
    <input type="checkbox" bind:checked={colours.red}>
    <label>Red</label><br>
    <input type="checkbox" bind:checked={colours.green}>
    <label>Green</label><br>
    <input type="checkbox" bind:checked={colours.purple}>
    <label>Purple</label><br><br>
</div>

Я поместил его в REPL, чтобы вы могли попробовать здесь

Вам необходимо:

  • удалить logi c из кода вашего шаблона - все logi c должны быть в вашем коде сценария
  • привязать к ха sh, содержащему ваши цвета, который может храниться в localstorage
  • использовать тройное равенство, а не двойное равенство (см. строгое равенство)
  • удалить атрибут value из ваших флажков (bind: проверено, как управляется значение)
  • не дублируйте атрибут id в HTML (он вам все равно не нужен)
  • вам не нужен name Атрибут
  • Есть также многочисленные проблемы с вашим html, которые здесь выходят за рамки (использование меток, использование br)
...