字段值被推送到错误的数组

Question

在一个 vue 应用程序表单中，我有两个文本输入和一个文件输入。

我想要发生的事情：文本输入应该进入 fieldHeader 数组，文件输入应该进入 fieldsArray 数组。

发生了什么： 文本字段和文件输入都进入 fieldHeader 和 fieldsArray。单击“添加字段”后两个数组的 console.log 是

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

应该是fieldHeader:

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

和字段数组：

0: {imgOne: File}

我认为 v-model 会将项目推送到正确的数组中，但事实并非如此。我现在正在努力的想法是重构 v-for，因为这是我目前唯一可以看到代码混合了两个数组概念的地方。

<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>

Answer 1

像下面的片段一样尝试：

const { ref } = Vue
const app = Vue.createApp({
  setup () {
    const fieldsArray = ref([])
    const fieldHeader = ref([])
    const handleAddField = () => {
      fieldHeader.value.push({name: '', desc: ''});
      fieldsArray.value.push({imgOne: null});
    };
    const onSelected = () => { }
    return { fieldsArray, fieldHeader, handleAddField, onSelected }
  }
})
app.use(Quasar)
app.mount('#q-app')

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/quasar@2.4.12/dist/quasar.prod.css" rel="stylesheet" type="text/css">
<div id="q-app">
  <div v-for="(field, i) in fieldsArray" :key="i" >
    <q-input
       label="Name"
       v-model="fieldHeader[i].name"
       type="text"
       dense
     ></q-input>
     <q-input
       v-model="fieldHeader[i].desc"
       type="textarea"
     ></q-input>
     <q-file
       v-model="fieldsArray[i].imgOne"
       @update:model-value="onSelected()"
     ></q-file>
 </div>
 <q-btn @click="handleAddField">Add Field</q-btn>
 <p>fieldsArray: {{fieldsArray}}</p>
 <p>fieldHeader: {{fieldHeader}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@2.4.12/dist/quasar.umd.prod.js"></script>

字段值被推送到错误的数组

Field value is getting pushed to wrong array

javascript

vue.js

vuejs3