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.

Vladimir Shefer · Accepted Answer · 2021-05-09T21:51:30.500

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
            }),

edited May 09 '21 at 21:51

answered May 09 '21 at 21:45

Vladimir Shefer

661
3
19

But how can i use object here ? item.id has the dynamic value. – Abdul Shakoor Kakar May 09 '21 at 21:48
Updated my answer. You still can access value by string key in object using square brackets – Vladimir Shefer May 09 '21 at 21:52
Maybe you will need to cast int index to string. For example `` – Vladimir Shefer May 09 '21 at 21:53

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

1 Answers1