提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
前言
一、问题如何出现的？出现示例
二、解决问题的3种方法
1.this.$nextTick()
2.this.$forceUpdate()
3.this.$set(obj, key, value)
前言
提示：这是记录我个人工作中遇到的问题的解决方法,希望可以帮助到遇到相同问题的道友
一、问题如何出现的?
问题描述：当在一个使用vue并且确定用elementUI作为组件库的项目中时,你大概率会出现这个问题,即为获取到后端接口返回的数据后,数据回显到前端页面不上去,这个时候你会感到很困惑,为什么所有的步骤都没错,值也拿到了,就是数据回显不上去呢?
这个是由于对DOM元素加载顺序,函数调用顺序还有其他问题导致的,这里不做赘述,好在vue给出了解决的方法,我个人使用到的有3种解决方法,或许还有其他对应的解决方法,有我不知道的,欢迎大家指出和讨论,互相进步,这里呢,着重说明我使用到的3种方法.
二、解决问题的3种方法
1.this.$nextTick() ,将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。
父页面用于调用子组件的函数:
//调用中转站组件open_station(id) {let _this = this;getTransferPost(id).then((response) => {this.form_stationdata = response.data;});this.$nextTick((_) => {_this.$refs.station_ref.info();//调用子组件的info函数,打开弹框});},
子组件的info()函数
//用于打开dialog弹框的子组件函数 info() {this.open = true;},
详细解释:父页面使用this.nextTick(),是因为调用子组件的info()函数时,一旦子组件的DOM元素未加载完毕,直接调用info()会导致调用失败,如果是带入参数计算函数体的函数,还会导致报错,nextTick则会等待DOM元素加载完毕后,再调用info(),不会导致调用失败和报错
2.this.$forceUpdate();v-for里面数据层次太多，或者套的组件层级太多， 数据变了，页面没有重新渲染，需手动强制刷新。
select标签代码
//这里是页面的select的选择框<el-selectv-model="form.gridId"style="width: 100%"placeholder="请选择工作网格"@change="Gridtodetails"><el-optionv-for="s in Grid_to_list":key="s.gridId":label="s.gridName":value="s.gridId"/></el-select>
JS代码
//select框选中值后,调用的函数Gridtodetails(val) {// console.log(val);this.$forceUpdate();},
详细解释:页面的select框的option里面是有值的,并且能够下拉展示出来,但是点击后无法选中,点击无效,这个时候给select框添加一个@change事件,点击触发后执行this.$forceUpdated()函数,这个时候select框功能恢复正常,select框能够正确的获取到值
3.this.$set(obj, key, value)
视图层显示数据回显内容
<template><div class="studen_pro"><button @click="setStudent">添加属性</button>{{ student.name }} +{{ student.age}}<input type="text" v-model="student.age"></div></template>
普通JS赋值对象属性数据
<script>export default {data() {return {student: {name: '马大哈',}}},methods: {setStudent() {this.student.age = 10console.log(this.student)}}}</script>
说明一:这个时候,普通的JS赋值,在视图层中无法回显上来,但是student对象已经有age属性值为10
$set赋值对象属性数据
<script>export default {data() {return {student: {name: '马大哈',}}},methods: {setStudent() {this.$set(this.student, 'age', 10)console.log(this.student)}}}</script>
说明二:这个时候,$set赋值,在视图层中已经回显上来,student对象也已经有age属性值为10
详细解释:在这里我们发现虽然这个对象身上已经有了该属性，但是视图层并没有更新该数据，是什么造成的呢？由于受JavaScript的限制，vue.js不能监听对象属性的添加和删除，因为在vue组件初始化的过程中，会调用getter和setter方法，所以该属性必须是存在在data中，视图层才会响应该数据的变化,如果不想使用$set,那么就去声明这个添加的属性
