Vue.jsでチェックボックスを複数選択してPOSTしても値が１つ分しか入らない

Question

前提・実現したいこと

チェックボックス複数選択し、Submitしても最後に選択したチェックボックスしか反映されません。
チェックボックスはVue.js側で、POST等の処理はLaravelで行っています。

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

結果をvar_dumpで確認しても、最後に入力した値のみしか入っておらず、配列になっていません。

["id"]=> string(1) "3"

コード内に {{ Value }} を記述し、チェックボックスを選択すると、1, 2, 3のように値が入っていることは分かります。
ただ、Submitした際には3しか入っていません。

該当のソースコード

<template>
    <div>
        <input type="checkbox" :name="`id`" value="1" v-model="Value[0]">hoge
        <input type="checkbox" :name="`id`" value="2" v-model="Value[1]">fuga
        <input type="checkbox" :name="`id`" value="3" v-model="Value[2]">piyo
    </div>
</template>

<script>
    export default {
        props: [
            'old',
        ],
        data() {
            return {
                Value: this.old || [],
            }
        },
    }
</script>

Answer 1

以下のようにnameに[]を付与するとうまくいきました。

<template>
    <div>
        <input type="checkbox" :name="`id[]`" value="1" v-model="Value[0]">hoge
        <input type="checkbox" :name="`id[]`" value="2" v-model="Value[1]">fuga
        <input type="checkbox" :name="`id[]`" value="3" v-model="Value[2]">piyo
    </div>
</template>

Answer 2

要素番号はいらないみたいっす。

参考: チェックボックス - Vue.js

Comments

[poteto4401]

要素番号をなくしても変わらないんですよねぇ。
Controller側の問題でしょうか。。