Inline edit in vue js 3 with Composition API

Question

I tried to make inline editing in Vue Js 3 with Composition APIand I face this problem. When I click edit, it impacts all rows. How do I make it to only work in one row based on id?

Here's the result I have so far

The codes are there, but if it needs to be posted here as well, I will edit this question to put it here. Thank you.

Answer 1

There are 2 approaches for this:

1. Create a component for each row and manage its togel state within the component.
2. Make togel variable a map in the form: { [id]: true/false }. Then each togel[id] would be responsible for its own row state. Playground

Approach #1 is a more straight-forward way.