Vue 动态 v-model 生成具有空值的额外数组项

Question

我正在研究惯性 laravel 以更新来自 Vue 内联 table 输入的数据，

这是喷射流输入字段组件。

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

item.id是我的数据库增量id。

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

这是我尝试更新时的结果。

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

5 是实际的 item.id 但不知道为什么显示 0 到 4.

Answer 1

可能如果您在数组中设置第五个元素，它会自动扩展到所需的大小，并在缺少的位置上使用空元素。

可能您想使用关联数组（js 对象，{}）而不是数组（[]）

为此只需将 partner 的初始值替换为空对象

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

Vue 动态 v-model 生成具有空值的额外数组项

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

inertiajs

vue.js

vuejs2

jetstream