时间戳

首页 > 解决方案 > Svelte：在“每个”块中使用“bind:this”

svelte - Svelte：在“每个”块中使用“bind:this”

问题描述

each我想使用一个块来渲染一个对象数组。我需要能够使用each块内部的回调从数组中删除元素。此外，对于更复杂的 UI 交互，我需要each在主应用程序中提供对 -block 的每个组件的引用。

这是我的方法：

<script>
    let items = [{text: "one"}, {text: "two"}];
    
    function deleteItem(i) {
        items.splice(i, 1);
        items = items;
    }
</script>

{#each items as item, i}
<button bind:this={items[i].ref} on:click={() => deleteItem(i)} >
    {item.text}
</button>   
<p />
{/each}

可以理解的是，这会导致诸如 的错误item[i] is undefined，因为在items处理 的拼接时，bind:this无法再正确清理。

我试图通过将组件引用移动到单独的数组来解决这个问题。但无论我尝试什么，我都无法让参考数组和对象数组同步：无论何时deleteItem()处理，我都会null在 -array 中得到refs-values。这是我的一种方法（each打印 -array 的refs-section 应该有助于显示null-values）：

<script>
    import {tick } from "svelte";
    let items = [{text: "one", id: 1}, {text: "two", id:2}];
    let refs = [];
    
    async function deleteItem(i) {
        items.splice(i, 1);
        await tick();
        refs.splice(i, 1);
        items = items;
        console.log(refs);
    }
</script>

{#each items as item, i (item.id)}
<button on:click={async () => deleteItem(i)} bind:this={refs[i]}>
    {item.text}
</button>   
<p />
{/each}

{#each refs as ref}
{ref}
<p />
{/each}

我尝试了使用和不使用，尝试在不同的地方tick()插入，在每个块中使用和不使用以及使用和不使用。如何保持引用和数据同步？tick()async(item.id)

标签： svelte

解决方案

解决这个问题的方法是refs在使用之前清理阵列：

<script>
 let items = [...]
 let _refs = []
 $: refs = _refs.filter(Boolean)
</script>

<button bind:this={_refs[i]}></button>

使用这种技术，您仍将拥有null原始_refs数组中的值，但复制的版本 ( refs ) 将是干净的。

另一种方法是将元素绑定到项目本身，但如果您也在其他地方使用该数据，则可能不需要这样做：

<button bind:this={item.ref}>

（请注意，这仍然会产生错误，因为绑定元素在切片期间消失但仅通过赋值处理，您可以通过使用过滤器语句进行切片和赋值来解决此问题）

items = items.filter((item, idx) => idx != i)

推荐阅读