Используя Svelte для каждого блока, как связать: значение с переменной, хранящейся вне массива, но со ссылкой внутри массива? - PullRequest
Новая
       3

Используя Svelte для каждого блока, как связать: значение с переменной, хранящейся вне массива, но со ссылкой внутри массива?

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

Вот простой пример моей проблемы.

У меня есть массив, который будет содержать список вопросов. Инициализируется, держа только один вопрос. Как только пользователь ответит на первый вопрос, я добавлю sh следующий вопрос к массиву с помощью реактивного оператора.

Вот мой код в REPL Svelte: https://svelte.dev/repl/f950ce9c8ea94f0f9d1bef8f87680be0?version=3.20.1

Мне просто нужно, чтобы переменная atHome в строке 2 была true или false в зависимости от ответа пользователя. 

    let atHome = null;
    let questions = [
    {
      question: 'Are you stuck at home?',
      bindValue: atHome,
    },
  ];
</script>

{#each questions as question}
    <div class="VitWotc-question">
            <ul>
                <li>Script stuck at home => {atHome}</li>
                <li>Iteration Bind stuckatHome => {question.bindValue}</li>
            </ul>
      <p>{question.question}</p>
      <label>
        <input type="radio" bind:group={question.bindValue} value={true} />
        Yes
      </label>
      <label>
        <input type="radio" bind:group={question.bindValue} value={false} />
        No
      </label>
    </div>
  {/each}```

1 Ответ

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

Вы можете использовать on:change прослушиватель событий для входов, а затем передать параметры обработчику, где вы можете назначить одинаковые значения для question.value и для внешней переменной.

Примерно так : 

<script>
    let atHome = null;
    let questions = {
        atHome: {
            question: 'Are you stuck at home?',
            value: null
        }
    }
    let questionArray = []
    $: {
        questionArray = []
        for (let key in questions) {
            questionArray.push(questions[key])
        }
        console.log(questions.atHome.value);

    }

    function handleChange(event, question, atHome) {
        question.value = event.target.value === "true"
        atHome = question.value;
        console.log(question);
        console.log(atHome);
    }
</script>
{#each questionArray as question}
    <div class="VitWotc-question">
            <ul>
                <li>Script stuck at home => {atHome}</li>
                <li>Iteration Bind stuckatHome => {question.value}</li>
            </ul>
      <p>{question.question}  </p>
      <label>
        <input type="radio" name="q1" on:change={(e) => handleChange(e,question, atHome)} value={true} />
        Yes
      </label>
      <label>
        <input type="radio" name="q1" on:change={(e) => handleChange(e,question, atHome)} value={false} />
        No
      </label>
    </div>
  {/each}

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

Здесь у вас есть ссылка REPL: https://svelte.dev/repl/a2dc24f98ac1429db6964737522816e5?version=3.20.1

Не забудьте проверить консоль браузера, чтобы убедиться, что она работает.

...