Svelte 遍历以逗号分隔的键值数组

Question

我有一个逗号分隔的对象数组，例如... new_data = [ Max:500 , Ron:200 ]
我想遍历数组给出一个列表作为 Max-500 和 Ron-200 在 html 中看起来像

<li>Max-500</li>
<li>Ron-200</li>

我可以在 svelte 中使用 {#each} 标签获得解决方案吗？我试过了

{#each new_data as data}
   <li>{data}</li>
{/each}

Answer 1

您可以 map 您的阵列：

let new_data = ['Max:500', 'Ron:200'].map(item => item.split(':'))

然后使用 #each 如：

<ul>
{#each new_data as data}
    <li>{data[0]}-{data[1]}</li>
{/each} 
</ul>

Answer 2

或者像这样

<script>
    let new_data = ['Max:500', 'Ron:200']
</script>

<ul>
{#each new_data as data}
    <li>{data.replace(':','-')}</li>
{/each} 
</ul>

Svelte iterate over array of comma separated key values