0

我目前正在尝试在 svelte 中创建类似向导的一系列问题。为此，我使用了一个组件，该组件将问题作为参数并构建单选项目列表（简化）：

<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]
      });
    }
  })
},

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

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

4

1 回答 1

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

它也应该很好地转化为商店。请注意用作键的 each-loop (option.value)，这样 svelte 可以将无线电输入彼此区分开来。阅读文档中有关键控每个循环的更多信息。

于 2019-05-26T21:38:53.940 回答