I just wanted to look into few frameworks on how they are handling multiple inputs particularly relating to the same value, if picked React, Vue and Svelte for this case study:

Say, you were to pick up some veggies from your salad today:

1

let veggies = ["🥬","🌽","🌶","🥦","🍠"];

It would be better to have array of objects for topping like [{id: '', label: '', value: ''}] but for the ease of the demo, let us stick with an array for the toppings. We need to create a simple group of inputs of type checkbox.

First up React with 🎣:

Crux of handling those multiple checkboxs:

1
2
3
4
5
6
7
8

 const [checkedItems, setCheckedItems] = useState({});

  const handleChange = event => {
    setCheckedItems({
      ...checkedItems,
      [event.target.name]: event.target.checked
    });
  };

It's Vue's trun:

This the best I could do, thanks to GreenJello for the quick review.

The key component here is v-model:

1

<input type="checkbox" v-model="veggie.selected"> 

Finally, Svelte:

The key factor here is bind:group:

1

<input type=checkbox bind:group={selectedveggies} value={veggie}>

Contoller vs Magic vs Concise code I shall leave it to the reader discretion and choice!