关于vue中elementUI的input和select框值无法回显的问题解决

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 前言

• 一、问题如何出现的？出现示例

• 二、解决问题的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-select
                  v-model="form.gridId"
                  style="width: 100%"
                  placeholder="请选择工作网格"
                  @change="Gridtodetails"
                >
                  <el-option
                    v-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 = 10
      console.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,那么就去声明这个添加的属性

---