Список выбранных опций флажка в том же теге p - Использование Svelte - PullRequest
Новая
       99

Список выбранных опций флажка в том же теге p - Использование Svelte

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

В настоящее время я учусь использовать привязки в Svelte. Я нашел этот пример, с которым я практикуюсь, и хотел бы немного изменить код. Я пытаюсь, чтобы выбранные элементы отображались в 1 теге на одной строке вместо нескольких тегов p для каждого отмеченного параметра.

  • Если выбраны оба Роджера и Сид, тогда вместо перечисления Роджера на одной строке, а затем Сид на другой строке внизу, я просто хотел иметь -> Роджер, Сид (в той же строке в одном теге р).

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

  <script>
    let goodDogs = []
    let dogs = ['Roger', 'Syd']
</script>

<h2>
    Who's a good dog?
</h2>

<p>
    {#each dogs as dog}
        <p>{dog} <input type=checkbox bind:group={goodDogs} value={dog}></p>
    {/each}
</p>

<h2>
    Good dogs according to me:
</h2>

<p>
    {#each goodDogs as dog}
        <p>{dog}</p>
    {/each}
</p>

1 Ответ

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

Это на самом деле не вопрос Svelte, а скорее вопрос HTML. Тем не менее, я думаю, что если я вас правильно понимаю, вы захотите сделать что-то вроде следующего, где у вас есть #each для собак: 

<p>
    {#each dogs as dog}
            <span>{dog} <input type=checkbox bind:group={goodDogs} value={dog}></span>
    {/each}
</p>

То, что произошло, мы поменяли блок тег

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

Это также стоит отметить что вложение тегов

не рекомендуется, и изменение внешнего тега на a, чтобы он содержал элементы, возможно, более уместно.

Как правило, вы, вероятно, использовали бы для цели, показанной выше, которая является тег для описания списка. Затем вы можете оформить список по горизонтали, а не по вертикали - для этого есть несколько учебных пособий. Подробности о теге ul можно найти здесь

Вы можете заметить, что ваш список сгруппирован и слишком близко друг к другу. Вы можете рассмотреть возможность добавления отступов к элементам списка (или тегам span). Опять же, этим можно управлять с помощью CSS.

Также есть смысл обсудить теги h2, которые вы здесь использовали, поскольку они являются заголовками и не совсем соответствуют тому, чего вы пытаетесь достичь , но, опять же, с точки зрения простого ответа на этот вопрос, исправление, которое я упомянул выше, решит непосредственную проблему, и дается рекомендация о том, как узнать больше о HTML и CSS.

Надеюсь, что это помогает!

...