From 1e01850a097804a14ad928dfc2ceafc74c9066f2 Mon Sep 17 00:00:00 2001
From: Eric Kwoka <43540491+ekwoka@users.noreply.github.com>
Date: Tue, 2 May 2023 19:42:10 +0400
Subject: [PATCH] :zap: Improves select

---
 frameworks/keyed/alpine/index.html  | 8 ++++----
 frameworks/keyed/alpine/src/main.js | 9 ++++++---
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/frameworks/keyed/alpine/index.html b/frameworks/keyed/alpine/index.html
index 0e52ecfc6..e14b6958a 100644
--- a/frameworks/keyed/alpine/index.html
+++ b/frameworks/keyed/alpine/index.html
@@ -80,14 +80,14 @@ <h1>Alpine-keyed</h1>
       </div>
       <table class="table table-hover table-striped test-data">
         <tbody>
-          <template x-for="item of data" :key="item.id">
-            <tr :class="item.id === selected ? 'danger' : ''">
+          <template x-for="(item, idx) of data" :key="item.id">
+            <tr :class="item.selected && 'danger'">
               <td class="col-md-1" x-text="item.id"></td>
               <td class="col-md-4">
-                <a @click="select(item.id)" x-text="item.label"></a>
+                <a @click="select(idx)" x-text="item.label"></a>
               </td>
               <td class="col-md-1">
-                <a @click="remove(item.id)"
+                <a @click="remove(idx)"
                   ><span
                     class="glyphicon glyphicon-remove"
                     aria-hidden="true"
diff --git a/frameworks/keyed/alpine/src/main.js b/frameworks/keyed/alpine/src/main.js
index b63bce6f7..580342876 100644
--- a/frameworks/keyed/alpine/src/main.js
+++ b/frameworks/keyed/alpine/src/main.js
@@ -33,8 +33,7 @@ window.app = function() {
         this.data[i].label += ' !!!';
       }
     },
-    remove(id) {
-      const idx = this.data.findIndex(d => d.id === id);
+    remove(idx) {
       this.data.splice(idx, 1);
     },
     run() {
@@ -45,7 +44,11 @@ window.app = function() {
       this.data = buildData(10000);
       this.selected = undefined;
     },
-    select(id) { this.selected = id },
+    select(idx) {
+      if (this.data[this.selected]) this.data[this.selected].selected = false;
+      this.data[idx].selected = true;
+      this.selected = idx;
+    },
     swapRows() {
       const d = this.data;
       if (d.length > 998) {