VUE使用v-for循环不刷新视图的问题，求教

Z时代
2024-01-10
分类：技术分享

为什么_this.divFormList[0] = divFormListArr不刷新视图

_this.divFormList = divFormListArr可以刷新视图

代码如下

<template>
<div class="form-container">
<div class="btn-container">
<el-button type="primary">添加表格</el-button>
</div>
<div
v-for="(itemDiv, indexDiv) in divFormList"
:key="'divForm' + indexDiv"
:class="{ 'div-form-container':true, 'mt10':false}"
>
<div class='form-delete-container'>
<el-button
icon='el-icon-delete'
size='small'
>
</el-button>
</div>
<el-form
style="margin-top: 5px"
:label-position="labelPosition"
ref="form"
:model="form"
label-width="80px">
<el-row
v-for="(itemRow, indexRow) in itemDiv"
:key="'row' + indexRow"
>
<el-col :span="12" v-for="(item, index) in itemRow" >
<el-form-item
:label="item.description"
:key="index"
style="box-sizing: border-box;padding-right: 5px"
>
<el-input v-model="item.name" size="small"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</div>
</template>
<script>
export default {
name: "formOperation",
data() {
return {
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
divFormList: [ // divFormList
[ // itemDiv
[ // itemRow
{
"columnAttrList": [],
"showType": "input",
"attrList": [],
"sysEventList": [],
"sysRule": {},
"dataSourceType": null,
"dataSource": null,
"name": "zhuanye",
"model": "field_1611043120000_63863",
"type": "field",
"icon": "icon-input",
"key": "1611043120000_63863",
"width": "100%",
"defaultValue": null,
"attrObject": {},
"sysAttrList": [],
"eventList": [],
"description": "专业123",
"componentType": "文本输入框"
},
{
label: "活动名称2",
name: "",
description: "活动描述2"
}
],
[
{
label: "活动名称3",
name: "",
description: "活动描述3"
},
{
label: "活动名称4",
name: "",
description: "活动描述4"
}
],
[
{
label: "活动名称5",
name: "",
description: "活动描述5"
}
]
]
],
divFormStyle: true,
mt10: true,
sysGridFieldList: [
{
"columnAttrList": [],
"showType": "input",
"attrList": [],
"sysEventList": [],
"sysRule": {},
"dataSourceType": null,
"dataSource": null,
"name": "zhuanye",
"model": "field_1611043120000_63863",
"type": "field",
"icon": "icon-input",
"key": "1611043120000_63863",
"width": "100%",
"defaultValue": null,
"attrObject": {},
"sysAttrList": [],
"eventList": [],
"description": "专业",
"componentType": "文本输入框"
},
{
"columnAttrList": [],
"showType": "input",
"attrList": [],
"sysEventList": [],
"sysRule": {},
"dataSourceType": null,
"dataSource": null,
"name": "schoolName",
"model": "field_1611043120000_64114",
"type": "field",
"icon": "icon-input",
"key": "1611043120000_64114",
"width": "100%",
"defaultValue": null,
"attrObject": {},
"sysAttrList": [],
"eventList": [],
"description": "学校名称",
"componentType": "文本输入框"
},
{
"columnAttrList": [],
"showType": "input",
"attrList": [],
"sysEventList": [],
"sysRule": {},
"dataSourceType": null,
"dataSource": null,
"name": "beginTime",
"model": "field_1611043120000_80485",
"type": "field",
"icon": "icon-input",
"key": "1611043120000_80485",
"width": "100%",
"defaultValue": null,
"attrObject": {},
"sysAttrList": [],
"eventList": [],
"description": "入学时间",
"componentType": "文本输入框"
},
{
"columnAttrList": [],
"showType": "input",
"attrList": [],
"sysEventList": [],
"sysRule": {},
"dataSourceType": null,
"dataSource": null,
"name": "staffId",
"model": "field_1611043120000_39791",
"type": "field",
"icon": "icon-input",
"key": "1611043120000_39791",
"width": "100%",
"defaultValue": null,
"attrObject": {},
"sysAttrList": [],
"eventList": [],
"description": "staff_主键",
"componentType": "文本输入框"
},
{
"columnAttrList": [],
"showType": "input",
"attrList": [],
"sysEventList": [],
"sysRule": {},
"dataSourceType": null,
"dataSource": null,
"name": "endTime",
"model": "field_1611043120000_91797",
"type": "field",
"icon": "icon-input",
"key": "1611043120000_91797",
"width": "100%",
"defaultValue": null,
"attrObject": {},
"sysAttrList": [],
"eventList": [],
"description": "毕业时间",
"componentType": "文本输入框"
}
],
labelPosition: 'right'
}
},
mounted () {
const _this = this
this.$nextTick(()=>{
let divFormListArr = []
divFormListArr.push(_this.handleArrayByColumn(_this.sysGridFieldList, 2))
console.log('divFormListItem == ', divFormListArr)
_this.divFormList[0] = divFormListArr
// _this.divFormList = divFormListArr
})
// console.log(_this.divFormList)
},
methods: {
onSubmit() {
console.log('submit!');
},
addFormItem () {
},
handleArrayByColumn (data, num) {
if(Array.isArray(data)) {
let rowNum = Math.ceil(data.length/num)
console.log('is array == ', rowNum)
let itemDiv = []
for(let x=0; x<rowNum; x++) {
let rowArr = []
for(let y=0+(x*num); y<num+(x*num); y++) {
if(data[y] !== undefined) {
rowArr.push(data[y])
}
}
itemDiv[x] = rowArr
}
console.log('itemDiv == ', itemDiv)
return itemDiv
} else {
// console.log('is not array')
}
}
}
}
</script>
<style lang="scss" scoped>
.form-container {
padding: 20px;
}
.div-form-container {
/*background: fuchsia;*/
}
.form-delete-container {
width: 80px;
text-align: right;
vertical-align: middle;
font-size: 14px;
color: #606266;
line-height: 40px;
padding: 0 12px 0 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.mt10 {
margin-top: 10px;
background: fuchsia;
}
</style>