Question

我目前正试图在苗条中创建类似向导的连续问题。为此，我使用一个组件将问题作为参数并构建一个无线电项目列表（简化）：

<Question question="{{ activeQuestion }}"></Question>

在代码之后的代码中构建表单元素：

{{#each question.options as option}}
  <li class="question-section__option">
    <input type='radio' bind:group='selected' value='{{ option.value }}'>
    <label>{{ option.label }}</label>
  </li>
{{/each}}

oncreate中的

我观察问题参数并初始化并尝试根据我商店的答案设置默认值：

oncreate() {
  this.observe('question', question => {
    const answers = this.store.get('answers');

    if (answers[question.id]) {
      this.set({
        selected: answers[question.id]
      });
    }
  })
},

在组件的“question”属性更改一次后，设置selected值将停止工作。如果通过观察或仅在常规的onclick事件中设置它似乎并不重要。

如果有人知道我做错了什么或指出我正确的方向，那就太好了！

Answer 1

以下是Svelte v3中的简化问题向导：

<script>
    let questions = [{
        title: "First question",
        id: 'first',
        options: [{
            title: "Option 1",
            value: "option1"
        }, {
            title: "Option 2",
            value: "option2"
        }]
    }, {
        title: "Second question",
        id: 'second',
        options: [{
            title: "Option 3",
            value: "option3"
        }, {
            title: "Option 4",
            value: "option4"
        }]
    }];
    let activeQuestion = 0;
    $: question = questions[activeQuestion];
    function dec() {
        if (activeQuestion === 0) { return }
        activeQuestion -= 1
    }
    function inc() {
        if (activeQuestion === (questions.length - 1)) { return }
        activeQuestion += 1
    }
    let answers = {}
</script>

<h1>{question.title}!</h1>
{#each question.options as option (option.value)}
    <label on:click>
        <input type=radio 
                     name={question.id} 
                     value={option.value}
                     on:change={() => answers[question.id] = option.value}
                     checked={answers[question.id] == option.value}
                     /> 
        {option.title}
    </label>
{/each}

<button on:click={dec}>previous</button>
<button on:click={inc}>next</button>

REPL：https://svelte.dev/repl/2de246c59cb346ca8cb7244749afe8ea?version=3

它也应该很好地翻译到商店。请注意，每个循环都使用(option.value)作为键，这样svelte可以将无线电输入彼此区分开。进一步了解keyed each loops in the documentation。

设置bind：group-value的值以及动态元素

1 个答案: