问题描述
问题陈述：
我正在尝试设计一种涉及在每次 Parties Being Served 点击时复制 Add button 表单字段的设计。单击 Add Button 后，相应的 PartyInfo 对象将添加到 PartyInfoList 数组中
在 BaseButtonList.vue 文件中，我使用 PartyInfoList 数组来设置 v-for 循环
<base-card
v-for="(data,index) of partiesInfoList" :key="index"
ref="childComponent"
@add-parties="updatePartiesInfoList"
@delete-party="deleteParty(index)"
:lastElement="index === partiesInfoListLength - 1"
>
但是，重要的是要注意数组最初没有元素。但是，由于我没有其他方法可以将数据输入到数组中，尽管 partiesInfoList 数组的元素为零，但我还是不得不加载表单。我通过使用虚拟数据设置 partiesInfoList 来实现这一点。这允许显示初始表单。当 Add Another 按钮被点击时，第一个真正的条目将被推送到 partiesInfoList 的第二个索引。
然而，当从数组中删除条目时，这会导致严重的问题。当我控制台记录输出时，splice 确实正常工作。但是，Vue 最终从 DOM 中删除了错误的元素。
我使用了唯一的 index 键并尝试了其他可能的键，但都产生了相同的有害错误。任何帮助将不胜感激。我认为这是一个非常棘手的设计模式，我可以想到更简单的替代方案，但我想让它成为一个挑战。也许我可以设置更好的数据流或其他什么。
附上代码
BaseCard.vue
<template>
//contains the template for the input form element
</template>
<script>
import { random } from '@amcharts/amcharts4/.internal/core/utils/String';
import { EventBus } from './bus.js';
export default {
emits:['add-parties','delete-party'],props:['lastElement'],data() {
return {
partyInfo:
{
id: '',fullName: '',preAuthorize: '',serviceAddress: '',},validation: {
fullNameIsValid: true,serviceAddressIsValid: true
},hideAddButton: false,formIsValid: true,addServiceButtonText: '+ Add Service Notes (Optional)',serviceNotes: [],showServiceNotes: false,showDeleteButton: true,enteredServiceNote: '',//service notes addendum
}
},computed : {
showServiceNotex(){
if(!this.showServiceNotes){
return '+Add Service Notes (Optional)'
}else{
return '- Remove Service Notes';
}
}
},methods: {
setServiceNotes(){
this.showServiceNotes = !this.showServiceNotes;
},addAnotherParty(){
this.validateForm();
if(this.counter === 0){
this.counter++;
this.lastElement = false;
}
if(!this.formIsValid){
return;
}
let emitObj = JSON.parse(JSON.stringify(this.partyInfo));
this.$emit('add-parties',emitObj); //event
},deleteParty(){
this.$emit('delete-party');
},validateForm(){
this.formIsValid = true;
if(this.partyInfo.fullName === ''){
this.validation.fullNameIsValid = false;
this.formIsValid = false;
}
if(this.partyInfo.serviceAddress === ''){
this.validation.serviceAddressIsValid = false;
this.formIsValid = false;
}
},clearValidity(input){
this.validation[input] = true;
},clearForm(){
this.partyInfo.fullName = '';
this.partyInfo.serviceAddress = '';
this.partyInfo.preAuthorize = false;
}
},created(){
console.log('created');
}
}
</script>
附加的是 <BaseCardList>，它在 v-for 循环中呈现表单元素
BaseCardList.vue
<template>
<ul>
<base-card
v-for="(data,index) of partiesInfoList" :key="index"
ref="childComponent"
@add-parties="updatePartiesInfoList"
@delete-party="deleteParty(index)"
:lastElement="index === partiesInfoListLength - 1"
>
<!-- Wrapper for the `Parties Being Served` component-->
<template v-slot:title>
<slot></slot>
</template>
</base-card>
</ul>
</template>
<script>
import BaseCard from './BaseCard.vue';
export default {
components: { BaseCard },data() {
return {
selectedComponent: 'base-card',partiesInfoList : [
{id: 0,fullName: 'dummy',serviceAddress: 'dummy',preAuthorize: ''
}
],clearForm: false,counter: 1
}
},computed : {
hasParty(){
return this.partiesInfoList.length > 0;
},partiesInfoListLength(){
return this.partiesInfoList.length;
}
},methods: {
updatePartiesInfoList(additionalInfo){
// if(this.counter == 0){
// this.partiesInfoList.splice(0,1);
// }
this.partiesInfoList.push(additionalInfo);
this.counter++;
console.log(this.partiesInfoList);
console.log('The length of list is '+this.partiesInfoList.length);
},deleteParty(resId){
// const resIndex = this.partiesInfoList.findindex(
// res => res.id === resId
// );
// this.partiesInfoList.splice(resIndex,1);
if(this.counter == 1){
return;
}
this.partiesInfoList.splice(resId,1);
console.log('Index is '+resId);
console.log('after del');
console.log(this.partiesInfoList);
}
}
}
</script>
屏幕上的实际输出错误：相邻元素从 DOM 中删除。说，我点击了“第二个”的删除，但“第三个”被删除了。但是，如果 v-for 的末尾有一个空的表单元素，那么这个元素就会被删除。
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）