Svelte 每个块中的速记属性

Question

我有一个 JSON 变量，其中包含以下方式的属性：

// JSON variable defining attributes for elements to be created

let myElements = [
    {
        attr1: "myAttr1",
        attr2: "myAttr2",
    },
    {
        attr1: "myAttr4",
        attr2: "myAttr5",
    }
];

我想使用如下所示的 each 块基于 JSON 变量中定义的属性呈现 HTML 元素：

<-- Svelte Code -->

{#each myElements as myElement}
    <div {myElement.attr1} {myElement.attr2}>
    </div>
{/each}

这样它们就会以这种方式呈现：

<-- Desired Resultant HTML -->
<div attr1="myAttr1" attr="myAttr2"></div>
<div attr1="myAttr4" attr2="myAttr5"></div>

但是，当我在 HTML 标记中引用 {myElement.attr1} 之类的属性时，svelte 会显示“预期为 }”错误。可以这样使用速记属性吗？

Answer 1

你可以使用解构

<script>
    let things = [
    {attr1:'a',attr2:'b'},
        {attr1:'ace',attr2:'bdd'},
        {attr1:'as',attr2:'bsd'},
    ]
</script>

{#each things as {attr1, attr2}}
    <div {attr1} {attr2}>{attr1}</div>
{/each}