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

Question

我正在使用惯性 laravel 来更新来自 Vue 内联表输入的数据，

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

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