Javascript 绑定设置值：与动态元素组合的组值

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

组件的“问题”属性更改一次后，设置所选的

值将停止工作。它是通过观察设置的，还是仅在常规onclick事件中设置的，似乎并不重要

如果有人知道我做错了什么，或者给我指出了正确的方向，那就太好了
 这里是一个简化的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>


让问题=[{
标题：“第一个问题”，
id:'第一'，
选项：[{
标题：“备选方案1”，
值：“选项1”
}, {
标题：“备选方案2”，
值：“选项2”
}]
}, {
标题：“第二个问题”，
id:'第二'，
选项：[{
标题：“备选方案3”，
值：“选项3”
}, {
标题：“备选方案4”，
值：“选项4”
}]
}];
设activeQuestion=0；
$：问题=问题[activeQuestion]；
函数dec（）{
如果（activeQuestion==0）{return}
问题-=1
}
功能公司{
如果（activeQuestion==（questions.length-1））{return}
活动问题+=1
}
让答案={}
{问题.标题}！
{#每个问题.options作为option（option.value）}
答案[question.id]=option.value}
选中={答案[question.id]==option.value}
/> 
{option.title}
{/每个}
以前的
下一个

答复:

它也应该很好地转化为商店。请注意使用
（option.value）
作为键的每个循环，以便svelte能够区分无线电输入。了解更多信息。
您是否有机会制作一个小程序来帮助我们调试？（这可能是苗条本身的问题，而不是你做错了什么。）以下是如何在REPL中向组件添加存储：我尽了最大努力将场景重新创建为REPL：果然，我无法在REPL中复制此场景-它似乎工作得很好。因此，我使用基于您的示例的webpack构建设置在本地重新创建了我的示例-同样的问题再次出现。我还创建了一个github repo和设置，它演示了这个问题：在这一点上：非常感谢您在svelte上的工作和您的快速回复！在v3中制作了一个类似的实体模型，并检查了绑定
的问题。没有使用“每个按键”，所以svelte没有区分单选按钮。
{{#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() {
  this.observe('question', question => {
    const answers = this.store.get('answers');

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

<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>