每个svelte块中的速记属性

gcxthw6b  于 2021-09-29  发布在  Java
关注(0)|答案(1)|浏览(346)

我有一个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>

然而,当我引用如下属性时,svelte显示了一个“expected a}”错误 {myElement.attr1} 在html标记中。可以这样使用速记属性吗?

9rbhqvlz

9rbhqvlz1#

你可以用解构主义

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

相关问题