我想用多個文本輸入欄位填充表單。但是，當我洗掉這些輸入欄位之一時，UI 不會根據存在的資料正確更新。
條件.vue
<template v-slot:custom-form>
<el-row v-for="(condition, index) of customFormData" type="flex" :key="`${randomSalt}${index}`" :justify="isElse(condition) ? 'start' : 'space-around'">
<el-col : :span=".5">
{{condition.type.toLowerCase() === 'else' ? 'ELSE' : index > 0 ? 'ELSE IF' : 'IF'}}
</el-col>
<el-col ref="index" v-if="condition.type.toLowerCase() !== 'else'" :span="6">
<editable-value name="inputAction" dataType="property" v-model="condition.inputAction" :schema="condition.schema"></editable-value>
</el-col>
<el-col v-if="condition.type.toLowerCase() !== 'else'" :span=".5">
=
</el-col>
<el-col v-if="condition.type.toLowerCase() !== 'else'" :span="6">
<editable-value name="inputActionValue" dataType="value" v-model="condition.inputActionValue" :schema="condition.schema"></editable-value>
</el-col>
<el-col v-if="condition.type.toLowerCase() !== 'else'" :span=".5">
THEN
</el-col>
<el-col :span="6">
<editable-value name="ouputAction" dataType="output" v-model="condition.ouputAction" :schema="condition.schema"></editable-value>
</el-col>
<el-col :span=".5">
<el-button icon="el-icon-delete" type="text" plain @click="e => { deleteCondition(index) }"></el-button>
</el-col>
</el-row>
</template>
export default {
components: { EditableValue },
data () {
return {
customFormData: [
{
type: 'if',
schema: Schema
}
],
salt: 1043423
}
},
computed: {
randomSalt () {
return this.salt this.getRnd()
}
},
methods: {
deleteCondition (index) {
this.customFormData.splice(index, 1)
},
getRnd () {
return Math.floor((Math.random() * 1000000 / (Math.random() - 1)) 1)
},
chainCondition (type) {
this.customFormData.push({ ...this.customFormData[this.customFormData.length], type, schema: this.schema })
}
}
}
基本上，每個Editable-Values組件代表一個輸入欄位，customFormData是一個陣列，列出了屬于主表單的每一行輸入欄位。洗掉一行時，我們只需從陣列中拼接該行，反之亦然。
主要問題
其他一切都很好，除非我洗掉了一個既不是陣列中的第一行也不是最后一行的行。當發生這樣的洗掉時，應用程式中的資料（代碼）是正確的并且代表洗掉。
然而，用戶界面似乎已洗掉預期行下方的行。使用偽代碼，行為如下：
UI
<row 1 data="one"/>
<row 2 data="two" />
<row 3 data="three"/>
Code
data: {
1: 'one',
2: 'two',
3: 'three'
}
// If we delete row 2, the UI becomes as follows:
UI
<row 1 data="one"/>
<row 2 data="two" />
Code
data: {
1: 'one',
3: 'three'
}
我能做些什么來確保每一行都正確地代表它的資料。？
我嘗試通過更改行鍵來強制重新渲染，但是，這最終只會顯示空輸入欄位。我也嘗試使用物件而不是陣列來顯示行，但結果更糟，資料似乎對物件沒有那么反應。
我能做些什么來解決這個問題？
uj5u.com熱心網友回復：
您的問題很可能來自使用 v-forindex作為key。key必須是唯一且穩定的 -index僅滿足第一個條件（當第二行被洗掉時，第三行現在獲得索引 2 而不是 3 并且 Vue 渲染機制對需要在 DOM 中重新渲染/更新的內容做出錯誤的假設）
隨機的解決方法key也不起作用。computed快取值并僅在某些反應性依賴項發生更改時才更改（this.salt在這種情況下），因此您實際上key對所有行都使用相同的值。將其更改為方法將導致實際上一直重新渲染所有內容 - 這也不是您想要的
正確解決它的唯一方法是為每一行分配唯一的 ID - 它很可能是一個索引，但它必須與每一行一起存盤，因此每次洗掉某些行時它都不會改變......
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/496348.html