Vue dynamic v-model generating extra array item with null value

Question

I am working on inertia laravel to update data from Vue inline table input,

this is jet-stream input field component.

<jet-input type="text" v-model="inlineEdit.partner[item.id]"/>

item.id is my database increment id.

   data() {
        return {
            inlineEdit: this.$inertia.form({
                partner: [],
            }),
        }
    },
    methods: {
        updateInline() {
            this.inlineEdit.put(route('codes.update'))
        }
    }

and this is the result when i try to update.

array:6 [▼
  0 => null
  1 => null
  2 => null
  3 => null
  4 => null
  5 => "123"
]

5 is the actual item.id but don't know why it is showing 0 to 4.

Answer 1

Probably if you set fifth element in the array, then it automatically expanded to required size with null elements on missing positions.

Probably you want to use associative array (js object, {}) instead of array ([])

For this just replace the initial value of partner to empty object

            inlineEdit: this.$inertia.form({
                partner: {}, // <-- there
            }),