the element dom was deleted from the multilayer nested array in vue but not updated
in your own project, there is a scenario where the data format is complex, and sometimes you need to delete the inner data
.related codes
the data format is as follows:
classData:
[{
data: [
{ value: "",
isSelect: true,
classify: [
{key: "1", value: "", edit: false},
{key: "2", value: "", edit: false}
]
},
{ value: "", isSelect: false, classify: [] },
{ value: "", isSelect: false, classify: [] },
{ value: "", isSelect: false, classify: [] },
{ value: "", isSelect: false, classify: [] },
{ value: "", isSelect: false, classify: [] }
],
isShow: true
}, {
data: [
{ value: "1", isSelect: false, classify: [] },
{ value: "1", isSelect: false, classify: [] },
{ value: "", isSelect: false, classify: [] },
{ value: "", isSelect: false, classify: [] },
{ value: "", isSelect: false, classify: [] },
{ value: "", isSelect: false, classify: [] }
],
isShow: false
}
]
the html code is as follows:
el-row(v-for="(row, index1) in classData" :key="index1")
div.class-first__btn
div.radio-item(v-for="(item, index2) in row.data" :key="index1+index2" :class="{"isActive": item.isSelect}" @click="showLevelCon(row, item)")
span {{ item.value }}
el-button(type="text" size="mini" @click="addIndustryHandle(row, index1)" v-if="index1 === (classData.length - 1)")
i(class="el-icon-plus")
span.fontSize16
transition(name="bounce" tag="div")
div.class-con__info(v-if="row.isShow")
<!--div {{ levelData.a }}-->
div.class-con-container(v-for="(one, index3) in levelData.value" :key="index1+index3")
div.class-con-box
div.fontSize16.box-title {{one.key}}
div.box-text(v-if="!one.edit")
div.pt-2
span.fontSize14 {{one.value}}
div.fr.operation-icon
i.fontSize16.pr-3(class="el-icon-edit" style="cursor: pointer;" @click="one.edit = true")
i.fontSize16.pr-3(class="el-icon-close" style="cursor: pointer;" @click="deleteClassifyHandle(one, row, index1, index3)")
div(v-if="one.edit")
el-input(v-model="one.value" size="mini" style="width: 100px")
i.fontSize16.pr-3.fr.pt-2.fontBold(class="el-icon-check" style="cursor: pointer;" @click="one.edit = false")
:
what result do you expect? What is the error message actually seen?
when you click the delete button, when you want to delete the data, the card is also deleted in dom, but in fact the data is deleted and the card is not updated. At present, the conclusion of viewing the official website is that when modifying classData data, Vue cannot detect changes in the array, so it will not trigger page updates. Try the method provided by the official website, but it does not work. How do you solve it?