我的代碼正在運行，但我只是想知道是否有一種更整潔的方式來實作我通過一些解構所做的作業。基本上我是從這里的代碼開始的：
https://svelte.dev/repl/2441993f8d9946aa894bf07a8a8f9b4f?version=3.52.0
并將陣列嵌套在一個物件中并添加一個洗掉按鈕，如下所示：
<script>
let f={
"name" : "", "type" : "",
"values":[{ "label": "", "start": "", "end": "" },
{ "label": "", "start": "", "end": "" },
{ "label": "", "start": "", "end": "" }]
};
// let { name, type, values } = f
const addField = () => {f.values = [...f.values, {label: '', start: '', end: ''}]};
const removeField = (v, i) => {f.values = f.values.filter((e, id) => id!=i)}
</script>
<input type="text" bind:value={f.name} placeholder="name"/>
<input type="text" bind:value={f.type} placeholder="type"/>
{#each f.values as v, i}
<div>
<input id={i} type="text" bind:value={f.values[i].start} placeholder="start"/>
<input id={i} type="text" bind:value={f.values[i].end} placeholder="end"/>
<input id={i} type="text" bind:value={f.values[i].label} placeholder="label"/>
<input id={i} type="button" value="X" on:click={removeField(v, i)}>
</div>
{/each}
<button on:click|preventDefault={addField}>Add</button>
<button on:click={() => console.log(f.values)}>Save</button>
<pre>
{JSON.stringify(f, null, 2)}
</pre>
據我測驗它似乎可以作業，但我只是想知道是否有更簡單的方法來系結物件的嵌套值，因此代碼看起來更簡潔而不是參考'f'。到處。
當我嘗試參考解構值時，系結會丟失 - 我想這是正常行為。
uj5u.com熱心網友回復：
在變數中將是您可以直接使用的當前專案#each：v
{#each values as v, i}
<div>
<input type="text" bind:value={v.start} placeholder="start"/>
<input type="text" bind:value={v.end} placeholder="end"/>
<input type="text" bind:value={v.label} placeholder="label"/>
<input type="button" value="X" on:click={removeField(v, i)}>
</div>
{/each}
對于腳本部分，重新??分配或虛擬分配會有某些丑陋的解決方法，但最干凈的解決方案可能是將有關值的所有內容提取到單獨的組件中，例如
<!-- Values.svelte -->
<script>
export let values;
const addField = () => {values = [...values, {label: '', start: '', end: ''}]};
const removeField = item => {values = values.filter(x => x != item)}
</script>
{#each values as v, i}
<div>
<input type="text" bind:value={v.start} placeholder="start"/>
<input type="text" bind:value={v.end} placeholder="end"/>
<input type="text" bind:value={v.label} placeholder="label"/>
<input type="button" value="X" on:click={removeField(v)}>
</div>
{/each}
<button on:click|preventDefault={addField}>Add</button>
然后可以添加為：
<Values bind:values={f.values} />
REPL
（順便說一下，id屬性不允許以數字開頭，并且必須在整個頁面中是唯一的。）
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/524048.html
標籤：形式捆绑苗条解构