反応、Vue、およびsvelte:マルチチェックボックス結合の比較


マルチチェックボックスのバインド.


マルチチェックボックスのバインディングを扱うのは、反応しない最高の仕事です.反応は、VueまたはSvelteより非常に多くのコードを必要とします.私はVue例とのこの比較に基づいて、私は同じ“基礎”を維持しようとしました.どのように単純なVueやSvelteで参照してください?
チェックイットアウト🚀

反応する


Live Example
const [checkedJobs, setCheckedJobs] = useState<string[]>(['Frontend']);
const handleMultiCheckbox = ({
    target: { value },
  }: React.ChangeEvent<HTMLInputElement>) => {
    let checked = [...checkedJobs];
    let findIndex = checked.findIndex(
      (item: string): boolean => item === value
    );

    if (!checkedJobs.includes(value)) {
      checked = [...checkedJobs, value];
    } else {
      checked = checkedJobs.filter(
        (item: string, index: number) => index !== findIndex
      );
    }

    setCheckedJobs(checked);
};

<section>
  <h2>Multi Checkbox</h2>
  <input
    type="checkbox"
    id="frontend"
    value="Frontend"
    onChange={handleMultiCheckbox}
  />
  <label htmlFor="frontend">Frontend Developer</label>
  <input
    type="checkbox"
    id="backend"
    value="Backend"
    onChange={handleMultiCheckbox}
  />
  <label htmlFor="backend">Backend Developer</label>
  <input
    type="checkbox"
    id="fullstack"
    value="Fullstack"
    onChange={handleMultiCheckbox}
  />
  <label htmlFor="fullstack">Fullstack Developer</label>
  <p>Checked jobs: {checkedJobs.map((item: string) => item).join(', ')}</p>
</section>

Vue


Live Example
const checkedJobs = ref(['Frontend']);

<section>
  <h2>Multi Checkbox</h2>
  <input
    type="checkbox"
    id="frontend"
    value="Frontend"
    v-model="checkedJobs"
  />
  <label for="frontend">Frontend Developer</label>
  <input
    type="checkbox"
    id="backend"
    value="Backend"
    v-model="checkedJobs"
  />
  <label for="backend">Backend Developer</label>
  <input
    type="checkbox"
    id="fullstack"
    value="Fullstack"
    v-model="checkedJobs"
  />
  <label for="fullstack">Fullstack Developer</label>
  <p>Checked jobs: {{ checkedJobs }}</p>
</section>

スベルト


Live Example
let checkedJobs: string[] = ['Frontend Developer'];

  <section>
    <h2>Multi Checkbox</h2>
    <input
      type="checkbox"
      id="frontend"
      value="Frontend"
      bind:group={checkedJobs}
    />
    <label for="frontend">Frontend Developer</label>
    <input
      type="checkbox"
      id="backend"
      value="Backend" 
      bind:group={checkedJobs}
    />
    <label for="backend">Backend Developer</label>
    <input
      type="checkbox"
      id="fullstack"
      value="Fullstack"
      bind:group={checkedJobs}
    />
    <label for="fullstack">Fullstack Developer</label>
    <p>Checked jobs: {checkedJobs}</p>
</section>