在一個 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>
uj5u.com熱心網友回復：
試試下面的代碼片段：
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/[email protected]/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/[email protected]/dist/quasar.umd.prod.js"></script>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/419410.html
標籤：
下一篇：vue組件不顯示計算屬性