En un formulario de aplicación vue, tengo dos entradas de texto y una entrada de archivo.

Lo que quiero que suceda: las entradas de texto deben ir a una matriz fieldHeader y la entrada del archivo debe ir a la matriz fieldsArray.

Qué sucede: tanto los campos de texto como la entrada del archivo van tanto a fieldHeader como a fieldsArray. El console.log para ambas matrices después de hacer clic en "agregar campo" es

 0: {field: 0, name: 'text', desc: 'text', imgOne: File}

Debería ser encabezado de campo:

 0: {field: 0, name: 'text', desc: 'text'}

y camposArray:

 0: {imgOne: File}

Pensaría que el modelo v empujaría los elementos a las matrices correctas, pero eso no es todo. La idea en la que estoy trabajando ahora es reestructurar v-for, ya que ese es el único lugar donde actualmente puedo ver el código como una mezcla de los dos conceptos de matriz.

 <template> <div v-for="(field, i) in fieldsArray" :key="i" > <q-input label="Name" v-model="fieldHeader[i].name" type="text" dense /> <q-input v-model="fieldHeader[i].desc" type="textarea" /> <q-file v-model="fieldsArray[i].imgOne" @update:model-value="onSelected()" ></q-file> </div> <div @click="handleAddField">Add Field</div> </template>

 <script> const handleAddFields = () => { let i = fieldsArray.value.length; const item = { field: i, }; fieldHeader.value.push(item); fieldsArray.value.push(item); }; </script>