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

为什么_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>

回答

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

this.$set(_this.divFormList, 0, divFormListArr)
https://cn.vuejs.org/v2/guide...

https://cn.vuejs.org/v2/guide...
VUE使用v-for循环不刷新视图的问题,求教
文档里都有,上面两个回答都讲得很清楚了
还有就是vue3的话,这样写是可以监听到的

以上是 VUE使用v-for循环不刷新视图的问题,求教 的全部内容, 来源链接: utcz.com/a/103523.html

回到顶部