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

Question

此代码的作用：如果未选择任何口味，"Please select at least one flavour" & "You ordered and undefined is displayed"。然后，如果选择了一种口味，则不会显示任何内容。

我正在尝试做的事情：如果未选择任何口味，则会显示 "Please select at least one flavour"。然后只有在选择了某些东西时，我才想显示 "You ordered (then list whatever they ordered)" 即：你点了薄荷巧克力片、饼干和奶油。

我很困惑，因为我认为 ${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(', ');

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

Join Not Displaying Selected Items - Using Svelte

html

checkbox

svelte

svelte-3