wire:key

Overview

Using wire:key is essential, especially when looping over elements, to ensure that Livewire's DOM diffing correctly identifies what has changed and needs updating in the browser.

Consider this listing of posts.

// ./wires/Posts.cfc
component extends="cbwire.models.Component" {
    function posts() {
        return queryExecute( "select id,title from posts" );
    }
    function remove( postId ) {
        queryExecute( "delete from posts where id = :id", { id = postId } );
    }
}

<!--- ./wires/posts.cfm --->
<div>
    <cfloop array="#posts()#" index="post">
        <div>
            <h2>#post.title#</h2>
            <button wire:click="remove( #post.id# )">Remove</button>
        </div>
    </cfloop>
</div>

As posts are removed, CBWIRE re-renders our template, and then Livewire must figure out how to update the DOM. We can help Livewire know exactly what has changed using wire:key.

<div wire:key="post-#post.id#">
    <h2>#post.title</h2>
    ....
</div>

<!--- ./wires/posts.cfm --->
<div>
    <cfloop array="#posts()#" index="post">
        <div wire:key="post-#post.id#">
            <h2>#post.title#</h2>
            <button wire:click="remove( #post.id# )">Remove</button>
        </div>
    </cfloop>
</div>

It's important to ensure your key names are unique throughout the page, not just within your template. Otherwise, you may encounter weird rendering issues.