加入不显示所选项目 - 使用 Svelte

Question

此代码的作用：如果未选择任何口味，“请至少选择一种口味”和“您已订购且显示未定义”。然后，如果选择了一种风味，则不会显示任何内容。

我正在尝试做的事情：如果未选择任何口味，则会显示“请至少选择一种口味”。然后，只有在选择了某些东西时，我才想显示“您订购了（然后列出他们订购的任何东西）”，即：您订购了薄荷巧克力片、饼干和奶油。

我很困惑，因为我认为${flavours.slice(0, -1).join(', ')}; 和You ordered {join(flavours)} 会列出选择的口味。这是我正在玩的代码。 （信用：来自 Svelte 网站的 Svelte 示例）

 <script>
        let scoops = 1;
        let flavours = ['Mint choc chip'];

        let menu = [
            'Cookies and cream',
            'Mint choc chip',
            'Raspberry ripple'
        ];

        function join(flavours) {
            if (flavours.length === 1) return flavours[0];
            return `${flavours.slice(0, -1).join(', ')};
        }
    </script>

    <h2>Flavours</h2>

    {#each menu as flavour}
        <label>
            <input type=checkbox bind:group={flavours} value={flavour}>
            {flavour}
        </label>
    {/each}

    {#if flavours.length === 0}
        <p>Please select at least one flavour</p>
        <p>
            You ordered {join(flavours)}
        </p>
    {/if}

Answer 1

你有一些错误......

你错过了一个引号（但这是一个语法错误，我猜你会注意到如果你在原始代码中有这个，因为它根本不起作用）：

return `${flavours.slice(0, -1).join(', ')};

// fixed:
return `${flavours.slice(0, -1).join(', ')}`;

// you don't need the quotes here, anyway:
return flavours.slice(0, -1).join(', ');

您还缺少else，这就是为什么您的代码在选择某些值时不显示任何内容的原因：

    {#if flavours.length === 0}
        <p>Please select at least one flavour</p>

    {:else} <-- HERE -->

        <p>
            You ordered {join(flavours)}
        </p>
    {/if}

最后，为什么是slice？它会丢弃最后一个值，这真的是你想要的吗？

// fixed
return flavours.join(', ');