Vue 前端问题系列

一. 解决 element-ui 中的 el-select 等选择器无法显示选中内容的问题

1. 问题描述

前端页面时突然发现引用的 element-ui 中的 el-select 选择器无法显示选中内容，但是把表单数据全部填写完后打算上交时，el-select 选择器的内容又能够出现我首次选择的东西了，但是点击其它无效，不能够切换数据。
对数据修改时毫不影响 el-select 选择器的使用。

1. 问题现象

new Vue({
  data: {
    machine: {},
  },
  mounted() {
    this.init_data();
  },
  methods: {
    init_data() {
      env_machines_get({ id: 1 }).then((response) => {
        if (response.code == 200) {
          this.machine = response.data;
          // {env_id:1,machine_id:[1,2,3]}
        }
      });
    },
  },
});

2. 原因

1. 受现代 JavaScript 的限制，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它响应。

new Vue({
  data: {
    env_id: 1,
  },
});

2. Vue 首次初始化之后，便不会再进行加载渲染了，需要我们手动执行渲染方法去重新加载它。

<el-select v-model="machine.env_id" @change="$forceUpdate()">
    <el-option
        v-for="item in env_list"
        :key="item.id"
        :label="item.name"
        :value="item.id">
    </el-option>
</el-select>

3. 解决

1. 在 el-select 或 穿梭框等元素上添加 $forceUpdate() 函数即可