子コンポーネントでチェックをしたidを親コンポーネントで配列で管理したい
v-modelを使えばいいと思うのですが、配列でのv-modelの使い方がわからないです

vue
1//親(App.vue)
2<template>
3  <div v-for="item in items" :key="items.id">
4    <checkItem :item="item"/>
5  </div>
6</template>
7<script>
8var items = [
9  { id: 1, value: 'A' },
10  { id: 3, value: 'B' },
11  { id: 7, value: 'C' },
12  { id: 23, value: 'D' },
13  { id: 30, value: 'E' },
14]
15var checkedId = []
16</script>
17
18
19//子(CheckItem.vue)
20<template>
21  <div>
22    <p>{{ item.value }}</p>
23    <input type="checkbox" @change="$emit('input', item.id)">
24  </div>
25</template>
26

最終的にcheckedIdに選択したidが配列で管理したいです

行動規範の内容に同意します

回答1件

親 App.vue

javascript
1<template>
2  <div id="app">
3    <MyCustomInput :items="items" v-model="checkedIds"/>
4  </div>
5</template>
6
7<script>
8import MyCustomInput from './components/MyCustomInput.vue'
9
10export default {
11  name: 'app',
12  components: {
13    MyCustomInput
14  },
15  data() {
16    return {
17      items: [
18        { id: 1, value: 'A' },
19        { id: 3, value: 'B' },
20        { id: 7, value: 'C' },
21        { id: 23, value: 'D' },
22        { id: 30, value: 'E' },
23      ],
24      checkedIds: [3, 23],
25    }
26  }
27}
28</script>
29

子 MyCustomInput.vue

javascript
1<template>
2  <div>
3    <div v-for="item in items" :key="item.id">
4      <p>{{ item.value }}</p>
5      <input type="checkbox" :checked="value.includes(item.id)" @change="atChange(item.id)">
6    </div>
7  </div>
8</template>
9
10<script>
11export default {
12  props: {
13    items: {
14      type: Array,
15      default: () => [],
16    },
17    value: {
18      type: Array,
19      default: () => [],
20    },
21  },
22
23  methods: {
24    atChange(itemId) {
25      this.$emit('input', 
26        this.value.includes(itemId) 
27          ? this.value.filter(v => v !== itemId))
28          : [...this.value, itemId]
29      )
30    }
31  }
32}
33</script>