[Vue.js]複数のチェックボックスが選択されたときに値を保持する方法

Question

前提・実現したいこと

チェックボックスを選択した際に、その値を配列に追加して保持しておきたいのですが、
どのように実装できますでしょうか？

発生している問題・エラーメッセージ

v-model="Id"で値を保持しようと考えていたのですが、最後にチェックした１つしか保持できません。

全体的な内容としましては、jsonで取得したデータを親コンポーネントからループ処理で一件ずつ渡され、リストで表示している形になります。

該当のソースコード

<template>
  <div class="row">
    <div class="projectname">
      <span class="name-text">{{ project.projectName }}</span>
    </div>
<略>
    <div class="confirm-history">
      <span class="name-text">{{ project.confirmDates }}</span>
    </div>
    <div class="confirm-checkbox">
      <input
        type="checkbox"
        v-model="Id"
        value="project.id"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    project: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      Id: [],
    };
  },
};
</script>

<style lang="scss" scoped>
略
</style>

Comments

[yoshihiko555]

チェックされた内容を管理するのは、子コンポーネントで行うのでしょうか？
全体のソースコードがないので、なんとも言えませんが、文面を見る限り、
projectのチェックボックスが選択されたら、親コンポーネントでチェックされたprojectを管理するための配列を持っておいて、そこに追加するべきなのかなと感じましたが。。。

Answer 1

チェックボックスのvalueプロパティを示すIdは親コンポーネント側で定義しましょう。でないと値の入れ替えができず、毎回毎回子コンポーネントの固定値を引っ張ってきてしまいます。

Comments

[aoaoao]

おかげさまで解決しました。ありがとうございます。